1.7.2 中的 jQuery 事件委托答案

【问题标题】：jQuery event delegation in 1.7.21.7.2 中的 jQuery 事件委托
【发布时间】：2013-01-14 16:22:12
【问题描述】：

除了从$(document) 委派之外，还有什么方法可以使用 jQuery 委派一个事件，该事件将对应于页面上与选择器匹配的所有元素？

由于这可能措辞不佳，因此问题来了：

曾经有jQuery.live 将事件委托给与选择器匹配的所有元素。这被jQuery.delegate 取代，它将特定上下文选择器中的事件委托给其子代，而jQuery.on 又被jQuery.on 取代，它实际上做同样的事情，但在幕后有不同的位（我想）。

我想要做的是安全地为我页面上的每个div.foo 添加一个事件处理程序，无论它可能存在于何处或何时存在。根据文档和实证研究，以下内容只会绑定到脚本运行时存在的.foo 元素。由于稍后可能会在页面上放置 .foo 元素的代码，因此这并不完全有效。

jQuery('.foo').on('click', handler);

由于live 已弃用（可能已删除？），我试图不使用它，但我能想出的唯一解决方案是

jQuery(document).on('click', '.foo', handler);

但这不是live 最初在幕后所做的吗？更重要的是，是否有任何重要的原因不这样做？

我们专门使用 1.7.2 版本，但通用的 jQuery 答案也会有所帮助。

【问题讨论】：

这是live 最初所做的，但它也正是您要寻找的。理想情况下，您会使用 document 以外的其他内容，但是如果您无法缩小范围，那么 document 是您唯一的选择。
@JamesMontagne 是的，我也很怀疑。我只是不知道是否有理由不委派回文档，除了stopPropagation 可能会妨碍。
还有性能。它必须一直冒泡，页面上的每次点击都会被捕获并检查它是否是正确的选择器。

【解决方案1】：

事件从它们的源冒泡到它们被委派的任何地方，所以你应该在最低公共父级的任何级别使用 jquery().on。如果那是文件，那就这样吧。

否则，如果您的 .foo 项目总是在 .foocontainer （或其他）中创建，那么您可以在选择器中使用它，即使有多个项目 - 您最终只是附加。

我认为委托回文档的问题在于它可能需要事件冒泡很多次，从而在流程中产生额外的开销，因此最好将事件委托给尽可能靠近源的地方。

【讨论】：

【解决方案2】：

你是正确的，绑定到文档（如下）正是 live() 所做的：

jQuery(document).on('click', '.foo', handler);

这不好的原因是它的性能不是很好。每次您在任意位置单击时，document 都会检查它是否位于委派元素上。

更好的方法是使用一个元素代替document，它是最接近动态附加的父元素，但在页面加载时可用。即使这是一个顶级容器，与将所有内容附加到 document 相比，它仍然会提供性能优势。

【讨论】：