使用jQuery选择器

Question

$('#container').on('click', 'a',function()..

和

$('#container a').on('click',function()..

两个选择器之间有什么区别。

Answer 1

第一个将绑定到所有当前和未来的锚标签，而第二个将仅绑定到现有的锚标签。

第一个与使用.delegate()几乎相同，唯一的区别是事件和选择器被交换。

编辑：回答评论，因为它很长

第一个对于包含大量锚标记的动态内容或内容非常有用。第一个只绑定一个事件，该事件侦听事件以冒泡到它，这些事件是在与给定选择器匹配的元素上触发的。第一个可以重写为$("#container").delegate("a","click",function()...以获得完全相同的功能。在大多数情况下，它比直接将事件绑定到元素更有效。但是，如果您的内容不是动态的并且不包含很多锚标记，则应使用第二段代码，因为它不如第一段复杂。

Answer 2

1. 代码段1：

   将点击事件设置为#container

中的所有锚标记

2. 代码段2：

   在#container

中为所有锚标记设置点击事件

Answer 3

前者将点击处理程序附加到#container元素，如果点击恰好集中在a元素上，则会分配事件。如果在事件处理程序的赋值/绑定后动态更新，删除或添加a元素，则此功能特别有用。

后者将点击处理程序直接附加到a元素中包含的#container元素。这意味着在事件处理程序和函数绑定到DOM中的节点时，这些元素必须存在于DOM中。

Answer 4

检查jQuery docs

selector
A selector string to filter the descendants of the selected elements that
trigger the event. If the selector is null or omitted, the event is always
triggered when it reaches the selected element.

Answer 5

我猜'a'是一个选择器字符串，用于过滤触发事件的所选元素的后代。如果选择器为null或省略，则事件始终在到达所选元素时触发。