如何在更换事件注册区域时防止丢失事件

How to prevent lose event while replacing the area where the event registered

本文关键字：事件 失事 区域 注册      更新时间：2023-09-26

我有一个由插件创建的点击事件，然后我加载$。而Ajax只替换(更新)了包含click事件的区域，事件将丢失。

 <span ref='B'><span ref='A'></span></span>   
//click event is on A, but I replaced the html inside of B to <span ref='A'></span>;  
its update, so the replaced html are the same.

我看了很多相关的问题，我找到了解决方法

.live() //  will not work
.delegate(), // work
.on(), // work

解决方案是我应该绑定事件B而不是A像B.on('click', A, function(){}) ....

然而，我的结构很难改变，我更希望找到一个解决方案，可以在替换或替代时防止丢失事件。

请指教，非常感谢。

使用detach()解决

由于事件绑定存在于DOM元素的上下文中，因此当您开始删除或替换DOM元素时，您需要一些机制来重新建立事件绑定。

一个好的方法是通过父元素使用委托(如您所述- B.on('click', A, function(){})....)。

另一种选择是总是在有关DOM元素被删除或替换时重新建立绑定(因此在您的场景中，听起来这必须在Ajax回调/完成处理程序中)，但是这通常是一种较差的方法，并且远不如委托方法优雅。

如果您关心将on事件应用于页面上的某个元素。那么我建议只将事件绑定到document。

$(document).on('click', '#id-of-a', function(){
});

阅读这篇博客文章了解更多有关这方面的信息。

我找到了一个解决方案。这可以使用.detach()!测试。

相关文章：