3

例如，

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

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

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

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

4

2 回答 2

4

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

应该很容易理解。当您有如下代码时：

$(selector).method(arguments);

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

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

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

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

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

于 2014-09-04T01:38:44.393 回答
2

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

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

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

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

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

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

于 2014-09-04T01:33:39.180 回答