0

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

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

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

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

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

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

如何防止这种情况？

4

1 回答 1

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()

于 2013-09-26T01:38:34.077 回答