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

Question

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

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

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

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

当用户在这个新上下文中再次单击拒绝按钮时，不知何故，someFunction(( 执行了两次 - 一次来自原始单击，第二次来自此新单击。 再次关闭模式，加载新上下文，执行单击，瞧。有三个 someFunction(( 调用！

经过一些研究，这就是我发现的：当替换元素时，事件和数据会发生什么

如何预防这种情况？

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()取代。