javascript - 如何在替换事件注册区域时防止丢失事件

Question

我有一个由插件创建的点击事件，在我加载 $.ajax 并且只替换（更新）包含点击事件的区域后，该事件将丢失。

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

Answer 1

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

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

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

Answer 2

如果您担心将on事件应用于页面上的某个元素。然后我建议将事件绑定到document.

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

});

阅读此博客文章以获取有关此的更多信息。

Answer 3

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