1

このプラグインを使用して確認メッセージ ボックスを作成しています。

<input type="button" id="deleteByID" value="Delete Item By ID" />
<div id="modal">
    <div id="heading">
        Are you sure you want to do that?
    </div>
    <div id="content">
        <a href="#" id='revealYes' class="button green close"><img src="images/tick.png">OK</a>
        <a href="#" id='revealNo' class="button red close"><img src="images/cross.png">Cancel</a>
    </div>
</div>
$('#deleteByID').click(function(e) {
   $('#modal').reveal({
      animation: 'fade',
      animationspeed: 320,
      closeonbackgroundclick: true,
      dismissmodalclass: 'close'
   });
   $('#revealYes,#revealNo').click(function(){
      var choice = $(this).text();
      if(choice == 'OK'){
         deleteItemInCart(item5);
         updateQtyLabel('qtyItem');
      }else{
         return false;
      }
   });  
});

  1. #modalブログをこの関数として動的に変更したいのですがdiv、ページでこの関数を呼び出して、#modal上記の html として div を作成するにはどうすればよいですか。

     function messageBox(heading, confirmMsg, cancelMsg){
   var box = ' <div id="modal"><div id="heading">'+heading+'</div><div id="content"> <a href="#" id="revealYes" class="button green close"><img src="images/tick.png">'+confirmMsg+'</a> <a href="#" id="revealNo" class="button red close"><img src="images/cross.png">'+cancelMsg+'</a>';
   return box;
}
  2. 私のコンソールでは、ボタンdeleteItemInCart()をクリックするたびに関数の実行時間が+ 1増加しOKます。つまり、OKボタンを1回クリックすると、関数が1回呼び出され、メッセージボックスが閉じました。次に、OKボタンを2回クリックすると、コンソールで関数が2回呼び出されます。これを引き起こしている可能性のあるアイデア

どんな助けでも大歓迎です、ありがとう。

4

1 に答える 1

3

クリックするたびに、実行されるコードを意味する$('#deleteByID')新しいクリックハンドラーを作成しています$('#revealYes,#revealNo')

var choice = $(this).text();
if (choice == 'OK') {
    deleteItemInCart(item5);
    updateQtyLabel('qtyItem');
} else {
    return false;
}

をクリックするたびに 1 回余分に実行されます$('#deleteByID')

$('#revealYes,#revealNo')のクリック ハンドラーが他のクリック ハンドラーの外側になるようにコードを変更します。

$('#deleteByID').click(function (e) {
    if($('#modal').length == 0)
        $('body').append(messageBox('heading','confirm','cancel'))
    $('#modal').reveal({
        animation: 'fade',
        animationspeed: 320,
        closeonbackgroundclick: true,
        dismissmodalclass: 'close'
    });

});

$(document).on('click','#revealYes,#revealNo',function (e) {
    var choice = $(e.target).text();
    if (choice == 'OK') {
        deleteItemInCart(item5);
        updateQtyLabel('qtyItem');
    } else {
        return false;
    }
});

ハンドラーをバインドするのではなくデリゲート ハンドラーを使用して、動的要素にハンドラーを追加する

于 2013-09-06T01:40:07.540 に答える