从更改的元素中删除委托事件

Question

我有一个内容是动态的模态，并且这个模态有一个拒绝按钮。

这个模态本身是通过链接动态生成的，所以我必须使用委托

$( "body" ).delegate( ".reject", "click", function(e) {
     $(".modalInfo").hide();
     $(".modalReject").show();
     someFunction();
});

假设用户单击拒绝按钮并关闭模式。然后她加载了一个新的模态，所以这个模态的上下文发生了变化并且有一个新的拒绝按钮。

当用户在这个新上下文中再次单击拒绝按钮时， someFunction() 以某种方式执行了两次 - 一次来自原始点击，第二次来自新点击。再次关闭模式，加载一个新的上下文，执行点击，瞧……得到了三个 someFunction() 调用！

经过一番研究，这是我发现的：When replace element, what happen on the events and data

如何预防？

Answer 1

首先，如果所有对话框上的 .reject 按钮都具有相同的行为和类名，那么您可以只保留一个委托事件处理程序，而无需再次安装或删除前一个。使用委托事件处理的美妙之处在于，目标对象可以来来去去，而事件处理程序则保持原状。

如果您确实有理由删除原始事件处理程序并将其替换为其他内容，并且如果您切换到使用 .on() 而不是 .delegate()（jQuery 1.7+ 中的当前处理方式），那么您可以这样做：

$(document.body).on("click", ".reject", function(e) {
     $(".modalInfo").hide();
     $(".modalReject").show();
     someFunction();
});

然后，您可以像这样使用.off() 卸载事件处理程序：

$(document.body).off("click", ".reject");

或者，如果您只想删除该事件和选择器的单个委托事件处理程序，则需要单独声明该函数，然后将相同的函数传递给.on() 和.off()。

function myHandler(e) {
    $(".modalInfo").hide();
    $(".modalReject").show();
    someFunction();
}

$(document.body).on("click", ".reject", myHandler);

然后，您可以像这样使用 .off() 卸载单个事件处理程序：

$(document.body).off("click", ".reject", myHandler);

---

仅供参考，自 jQuery 1.7 起，.delegate() 已被 .on() 取代。