1.7.2中的jQuery事件委托
有没有办法使用jQuery委托一个事件,该事件将对应于页面上与选择器匹配的所有元素,而不是从$(document)
委托?
既然这可能措辞不好,这就是问题:
曾经有jQuery.live
将事件委托给匹配选择器的所有元素。 这被jQuery.delegate
取代,后者将特定上下文选择器中的事件委托给它的子jQuery.on
,后者又被jQuery.on
取代, jQuery.on
实际上有相同的function,但在幕后有不同的位(我想象)。
我想要做的是,安全地为我页面上的每个div.foo
添加一个事件处理程序,无论它在哪里,或者它可能存在。 根据文档和实证研究,以下内容仅绑定脚本运行时存在的.foo
元素。 由于代码可能会在页面上放置.foo
元素,因此这并不完全有效。
jQuery('.foo').on('click', handler);
由于live
已弃用(可能已删除?),我试图不使用它,但我能想出的唯一解决方案是
jQuery(document).on('click', '.foo', handler);
但这不是live
幕后的活动吗? 更重要的是,有没有重要的理由不这样做?
我们专门使用1.7.2版本,但通用的jQuery答案也会有所帮助。
事件从它们的源到它们被委派的任何事物都会冒泡,所以你应该使用jquery()。在什么级别上是最低的公共父级。 如果那是文件,那就这样吧。
否则,如果.foo
项目总是在.foocontainer
(或其他)中创建,那么您可以在选择器中使用它,即使它们不止一个 – 您最终会附加。
我认为委托回文件的问题是,它可能要求事件冒泡很多次,从而在流程中产生额外的开销,因此最好将事件委托给尽可能靠近源的事件。
你是正确的,因为绑定到文档(如下所示)正是live()
作用:
jQuery(document).on('click', '.foo', handler);
这很糟糕的原因是因为它不是很有效。 每次在任何地方单击时, document
检查它是否在委托元素上。
更好的方法是使用一个元素代替document
,该document
是动态附加的document
的最近父document
,但在页面加载时可用。 即使这是一个顶级容器,它仍然可以提供将所有内容附加到document
的性能优势。