Question

我有以下功能可以动态地向页面添加元素;

function modalConfirm (title, msgBody, btnOK, btnCancel) {
    element = '<div class="ui-modal-widget"><div class="confirm"><h2>'+title+'</h2><div>'+msgBody+'</div></div>';
    element += '<div class="button-panel" style="float:right; margin-top:-30px; margin-right:5px;">';
    element += '<a href="#" rel="closeModal">'+btnCancel+'</a>';
    element += '<a href="#" rel="confirmModal">'+btnOK+'</a>';
    element += '</div></div>';
    // OPEN MODAL WINDOW

点击$('a.checkData')时，我正在调用上面的函数。

问题

一切似乎都很好，但是，如果我通过多次点击$('a[rel=closeModal]')来关闭打开的模态窗口，那么几次点击$('a[rel=confirmModal]')它会执行与我点击$('a[rel=closeModal]')相同的操作{1}}。

实施例

$('a[rel=closeModal]').live('click', function(e) {
e.preventDefault();
// CLOSE MODAL BOX
});

$('a[rel=confirmModal]').live('click', function(e) {
e.preventDefault();
console.log('Modal Is Confirmed');
});

考虑上面的代码。点击$('a.checkData')并点击$('a[rel=closeModal]')后，用户点击$('a[rel=confirmModal]') 5次。它会写入 5次 Modal Is Confirmed ，只需点击一次。如果用户在点击$('a[rel=closeModal]')之前点击$('a[rel=confirmModal]') 10次。它会写10次Modal Is Confirmed。

如果你能解决这个问题，我会很高兴的。我尝试在$('a[rel=confirmModal]').unbind('click');之前的任何地方（在函数内部，在调用函数之前，在$('a[rel=confirmModal]').live('click',function(){});之前/之后/之内调用函数时）没有任何成功地添加{{1}}。

提前感谢您的时间和关注。

Answer 1

您需要考虑使用jQuery delegate()和jQuery undelegate()

这与live非常相似，但您可以选择是否绑定到文档正文或未来添加元素的相对父级。

取消绑定实时单击实时元素不能按预期工作

1 个答案: