当您 remove() 一个元素并将其 append() 到别处时，事件是不是会在 jQuery 中丢失？

Posted 2023-02-22

【中文标题】当您 remove() 一个元素并将其 append() 到别处时，事件是不是会在 jQuery 中丢失？

【英文标题】：Are events lost in jQuery when you remove() an element and append() it elsewhere?当您 remove() 一个元素并将其 append() 到别处时，事件是否会在 jQuery 中丢失？

【发布时间】：2010-10-08 05:34:18

【问题描述】：

当你 remove() 一个元素并将它 append() 到别处时，jQuery 会发生什么？

似乎这些事件没有挂钩 - 就好像您只是插入新的 html 一样（我猜这是正在发生的事情）。但我的代码也可能有错误 - 所以我只是想在继续之前验证这种行为。

如果是这种情况 - 是否有任何简单的方法可以将事件重新连接到 HTML 的那部分，或者有其他方法来移动元素而不会丢失事件。

【参考方案1】：

jQuery detach() 函数与 remove() 相同，但在它返回的对象中保留了事件处理程序。如果您必须删除该项目并将其放置在其他地方，您可以使用它。

var objectWithEvents = $('#old').detach();
$('#new').append(objectWithEvents);

在此处查看 API 文档：http://api.jquery.com/detach/

【讨论】：

我需要对一堆元素进行排序，使用 $parent.empty() 将它们从父级中删除，然后将排序后的元素列表附加回其父级。这对我来说是正确的答案。谢谢！

【参考方案2】：

是的，jQuery 使用remove() 的方法是取消绑定与 jQuery 自己的bind 绑定的所有内容（以防止内存泄漏）。

但是，如果您只想在 DOM 中移动某些内容，则不必先 remove() 它。只要append 满足您的需求，事件绑定将一直存在:)

例如，将其粘贴到此页面上的 firebug 中：

$('li.wmd-button:eq(2)').click(function() alert('still here!') ).appendTo(document.body)

现在向下滚动到此页面的底部，然后单击现在埋在 SO 页脚下的小球状图标。您将获得alert。这一切都是因为我注意不要先remove。

【讨论】：

酷。我希望是这样的。是的交互式***！

@ceescentfresh 回答这个问题十周年快乐 :-)

@Simon_Weaver：废话十年

【参考方案3】：

使用jQuery1.3.1 live()绑定事件，你不用担心这个..

更新：现在不推荐使用实时事件，但您可以从 $(document).on() 获得相同的效果。

【讨论】：

我原来的问题是这样吗？到底发生了什么。我现在会检查“现场”

了解现场直播当然好 - 但要注意这里的警告docs.jquery.com/Events/live#typefn

如果您使用的是特定的 dom 对象而不是选择器，则不适用。这也是我的第一个想法。