使用处理程序删除元素时的最佳做法是什么？答案

【问题标题】：what is best practice when removing elements with handlers?使用处理程序删除元素时的最佳做法是什么？
【发布时间】：2012-02-17 03:07:03
【问题描述】：

在删除我的委托处理程序附加到的元素时，我在 IE8 上使用 jQuery 的 .delegate() 方法遇到了问题。这是场景：我有一个表，其中的行都有一个删除按钮。这些行是动态创建的，因此删除按钮是使用委托连接的，以处理单击事件。当需要删除最后一行时，整个表都被删除了（只有在有一个值可以创建至少一行时才创建表。）除了 IE8 之外，几乎所有地方都可以正常工作。即使那样，它也可以在某些页面上运行，但不是一个（每个页面上使用完全相同的代码。）对于这个特定页面，删除最后一行会在 IE8 中生成一个 js 错误，指出“需要对象”- 违规行在委托的 jQuery 代码中。

所以问题是，当处理程序正在使用的某些 DOM 元素被删除时，处理程序的最佳做法是什么？是否应该在某个时候调用 undelegate，如果是，在哪里调用？

【问题讨论】：

请输入代码.....因为我认为您的代码存在问题，而不是“最佳实践”...
如何从 DOM 中删除表格元素？贴出代码。
希望这能给你一个想法或什么jsfiddle.net/reigel/c5mr5

标签： jquery event-delegation

【解决方案1】：

使用 jQuery 的.remove() method:

“当您想要移除元素本身以及其中的所有内容时，请使用.remove()。除了元素本身，所有与元素关联的绑定事件和 jQuery 数据都将被移除。”

或.empty() method 删除所有子元素但保留顶级元素。

【讨论】：

@Reigel - 我想知道，但 OP 没有说，也许正在使用 .html() 或 .detach() 或普通 DOM 方法。问题确实要求“最佳实践”，所以我已经回答了......
所以这提出了一个很好的观点，也许最佳实践问题放错了地方。正在使用 .html() 在主干视图中创建表如果附加的主干集合中至少有一个模型，则使用 .html 构建表 html 并将其放置在容器中 - 如果集合中的最后一项被删除, html 设置为空字符串。也许真正的问题是我需要一种更好的方法来创建和删除视图代码中的 DOM 元素？
好吧，.html() 方法的 jQuery doco 没有提到它（我可以看到），但我只是快速查看了代码，它似乎试图清理事件和现有 html 的数据，然后再替换/删除它（我不知道旧版本是否如此；我正在查看 1.7.1）。
FWIW，jQuery 的 html() 文档的当前版本确实说它取消了事件处理程序的绑定。 api.jquery.com/html

【解决方案2】：

Kinakuta，从你所说的来看，这可能只是正确设置委派和适当地措辞删除的问题，而不是使用或不使用 remove() 本身。很难理解为什么只有 IE8 应该行为不端，但 jQuery 中可能存在一些 IE8 问题。

在 jQuery 1.7+ 中，.on() 取代了.bind()、.live() 和.delegate()，并可能提供前进的道路。我想做这样的事情：

$("#myContainer").on("click", "button.delete", function(event){
    $(this).closest("tr", "#myContainer").remove();
});

如果您使用的是 jQuery .delegate() 实现类似的效果。

据我所知，在删除行时，表和/或其行是使用 MVC 或任何其他生成方法生成的，这并不重要。

【讨论】：