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

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

1 个答案: