jquery动态绑定(bind).on()选择 parent 还是 child ？

Question

例如，

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

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

.on() 将“tr”与单击事件处理程序绑定(bind)。第一个选择子项并直接注册单击事件处理程序。第二个选择父级“tbody”，并选择子级“tr”作为参数。

它们都是动态绑定(bind)吗？它们有同样的效果吗？这两者有什么区别？

Answer 1

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

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

$(selector).method(arguments);

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

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

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

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

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