取消绑定实时元素上的实时点击无法按预期工作

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]')。

例子;

$('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]') 5次后，再点击$('a[rel=confirmModal]')。点击1次，会写5次 Modal Is Confirmed 。如果用户单击$('a[rel=closeModal]') 10次后才单击$('a[rel=confirmModal]')。它将写入10倍的Modal Is Confirmed。

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

提前感谢您的时间和关心

Answer 1

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

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