防止 jQuery 在元素删除时取消绑定事件

Prevent jQuery from unbinding events on element removal

本文关键字：取消 绑定 事件 删除 jQuery 元素 防止      更新时间：2023-09-26

TL/DR：有没有办法防止jQuery在从DOM中删除元素时自动取消绑定事件？

当您在 jQuery 元素上调用 remove() 时，jQuery 会自动取消绑定该元素的所有事件。例如，假设我有以下内容：

var button = $("<button>Click me</button>");
$("body").append(button);
button.click(function() {
  console.log("clicked");
});
button.remove();
$("body").append(button);

如果我单击该按钮，则不会将任何内容输出到控制台。解决此问题的一种方法是将事件绑定到元素的父元素，如下所示：

$("body").on("click", "button", function() {
  console.log("clicked");
});

我正在尝试构建一个可重用的控件，该控件包装 jQuery 元素并向其添加新行为。将事件绑定到父元素的解决方案对我不起作用，因为我无法确定该元素在 DOM 中的附加位置以及是否会将其删除。出于性能原因，我不想将事件绑定到文档（可能有很多）。有没有办法防止jQuery的默认删除行为？

不要使用.remove()使用.detach() 

button.detach();

演示：小提琴

.detach（）

.detach（） 方法与 .remove（） 相同，只是 .detach（） 保留与已删除元素关联的所有 jQuery 数据。这 方法在将删除的元素重新插入到 DOM 在以后的时间。

.remove（）

与 .empty（） 类似，.remove（） 方法将元素从 当你想删除元素本身时，也使用 .remove（） 就像里面的一切一样。除了元素本身，所有 绑定事件和与元素关联的 jQuery 数据将被删除。 要在不删除数据和事件的情况下删除元素，请使用 .detach（） 相反。

相关文章：