例如,
$( "#dataTable tbody tr" ).on( "click", function() { alert( $( this ).text() ); }); $( "#dataTable tbody" ).on( "click", "tr", function() { alert( $( this ).text() ); });
.on()用click事件处理程序绑定“tr”。 第一个选择子项并直接注册click事件处理程序。 第二个选择父“tbody”,并选择子“tr”作为参数。
它们都是动态绑定吗? 他们有同样的效果吗? 这两者有什么区别?
不,只有第二个版本是动态绑定。
应该很容易理解。 如果您有以下代码:
$(selector).method(arguments);
jQuery在您执行代码时找到与selector
匹配的所有元素,并在那时调用它们上的method
。 如果在首次加载页面时执行此代码,它将只找到与初始文档中的选择器匹配的元素。 如果动态添加tr
元素,则第一个版本将找不到它们,因此它不会将click事件绑定到它们。
当你使用带有选择器的.on()
作为第二个参数时,例如
$(outerSelector).on(event, innerSelector, function...);
它的工作原理如下。 它找到与outerSelector
匹配的所有元素,并将事件的处理程序绑定到它们; 当你调用.on()
时,这些元素必须存在。 当事件发生时,处理程序检查目标是否与innerSelector
匹配,然后它执行您的回调函数。 这是它允许事件处理动态添加元素的方式。
所以一般规则是outerSelector
应该引用文档中的静态元素,而innerSelector
引用动态元素。
可以说,两者都不是真正的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
的事件。
以上就是jQuery教程分享jquery动态绑定.on()选择父母还是孩子?相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/573308.html