我正在使用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次。知道是什么导致了这个非常感谢任何帮助,谢谢。
答案 0 :(得分:3)
每次点击$('#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;
}
});
使用委托处理程序而不是绑定处理程序来将处理程序添加到动态元素