Question

我正在使用this plugin创建确认消息框。

<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;
      }
   });  
});

我想将博客#modal更改为动态div作为此函数，如何在我的页面中调用此函数以创建一个#modal div作为上面的html。

 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;
}

在我的控制台中，每次点击deleteItemInCart()按钮时，功能OK都会增加执行时间+1。我的意思是，当我第一次点击OK按钮时，该功能调用1次，然后消息框关闭。然后第二次单击OK按钮，该功能在我的控制台中调用2次。知道是什么导致了这个

非常感谢任何帮助，谢谢。

Answer 1

每次点击$('#deleteByID')，您都会为$('#revealYes,#revealNo')创建一个新的点击处理程序，这意味着执行的代码

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

每次点击$('#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;
    }
});

使用委托处理程序而不是绑定处理程序来将处理程序添加到动态元素

在jquery中确认消息框

1 个答案: