例如,
$( "#dataTable tbody tr" ).on( "click", function() {
alert( $( this ).text() );
});
$( "#dataTable tbody" ).on( "click", "tr", function() {
alert( $( this ).text() );
});
.on() 将“tr”与单击事件处理程序绑定。
第一个选择子项并直接注册单击事件处理程序。
第二个选择父级“tbody”,并选择子级“tr”作为参数。
它们都是动态绑定吗?
它们有同样的效果吗?
这两者有什么区别?
不,只有第二个版本是动态绑定的。
应该很容易理解。当你有如下代码时:
$(selector).method(arguments);
jQuery 查找所有匹配的元素selector
在执行代码时,并调用method
那时的他们。如果在页面首次加载时执行此代码,它将仅查找与初始文档中的选择器匹配的元素。如果tr
元素是动态添加的,第一个版本不会找到它们,因此不会将单击事件绑定到它们。
当你使用.on()
使用选择器作为第二个参数,例如
$(outerSelector).on(event, innerSelector, function...);
它的工作原理如下。它找到所有匹配的元素outerSelector
,并将事件的处理程序绑定到它们;当您调用时这些元素必须存在.on()
。当事件发生时,处理程序检查目标是否匹配innerSelector
,然后它执行您的回调函数。这就是它允许事件在动态添加的元素上工作的方式。
所以一般规则是outerSelector
应该引用文档中的静态元素,而innerSelector
指动态元素。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)