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