jQuery动态绑定.on()：选择父元素还是子元素？

Question

例如，

$( "#dataTable tbody tr" ).on( "click", function() {
  alert( $( this ).text() );
});

$( "#dataTable tbody" ).on( "click", "tr", function() {
  alert( $( this ).text() );
});

.on()绑定了"tr"的点击事件处理程序。 第一个直接选择子元素并注册点击事件处理程序。 第二个选择父元素"tbody"，并将子元素"tr"作为参数选择。

它们都是动态绑定吗？ 它们有相同的效果吗？ 这两者之间有什么区别？

- Matilda Yi Pan

Answer 1

不，只有第二个版本是动态绑定。

这应该很容易理解。当你有这样的代码时：

$(selector).method(arguments);

jQuery会在执行代码时查找所有与选择器匹配的元素，并在那个时间调用它们上的方法。如果您在页面首次加载时执行此代码，则仅会查找初始文档中与选择器匹配的元素。如果动态添加了元素，则第一个版本将无法找到它们，因此不会将单击事件绑定到它们。

当您使用带有选择器作为第二个参数的.on()时，例如：

$(outerSelector).on(event, innerSelector, function...);

它的工作原理如下。它会查找所有与outerSelector匹配的元素，并为其绑定事件处理程序；这些元素在调用.on()时必须存在。当事件发生时，处理程序检查目标是否与innerSelector匹配，然后执行您的回调函数。这就是它允许事件在动态添加的元素上工作的方式。

因此，一般规则是outerSelector应该引用文档中的静态元素，而innerSelector引用动态元素。

- Barmar

Answer 2

可以说，两者都不是真正的“动态”。

以下内容将把页面上每个#dataTable tbody tr元素的onclick事件绑定到相应函数：

$( "#dataTable tbody tr" ).on( "click", function() { /*event*/ });

另一种方法会将一个onclick事件绑定到页面上的每个#dataTable tbody，只有当它的某个被点击的后代符合选择器tr（参见事件委托），该事件才会触发：

$( "#dataTable tbody" ).on( "click", "tr", function() { /*event*/ });

第二个可以被认为是动态的，因为它模拟了对指定选择器的单击操作，无论这些元素在绑定时是否存在。但从技术上讲，它是附加到 #dataTable tbody 的事件。

- Stryner