jquery 动态绑定 .on() 选择父母还是孩子？答案

【问题标题】：jquery dynamic binding .on() select parents or children?jquery 动态绑定 .on() 选择父母还是孩子？
【发布时间】：2014-09-04 01:26:17
【问题描述】：

例如，

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

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

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

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

【问题讨论】：

标签： jquery dynamic binding eventhandler

【解决方案1】：

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

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

$(selector).method(arguments);

jQuery 在您执行代码时查找与selector 匹配的所有元素，并在那时对它们调用method。如果在第一次加载页面时执行此代码，它只会在初始文档中找到与选择器匹配的元素。如果tr元素是动态添加的，第一个版本是找不到的，所以不会绑定click事件。

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

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

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

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

【讨论】：

【解决方案2】：

可以这么说，dynamic 也不是真的。

以下将onclick事件绑定到页面上的每个#dataTable tbody tr：

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

另一个会将 onclick 事件绑定到页面上的每个 #dataTable tbody，并且该事件仅在其单击的后代之一遇到选择器 tr 时触发（请参阅 Event Delegation）：

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

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

【讨论】：