代码之家 › 专栏 › 技术社区 › Matilda Yi Pan

jquery动态绑定.on()选择父级还是子级?

eventhandler binding dynamic jquery

Matilda Yi Pan · 技术社区 · 10 年前

例如

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

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

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

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

2 回复 | 直到 10 年前

Barmar 10 年前

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

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

$(selector).method(arguments);

jQuery查找与 selector 在执行代码时,调用 method 当时他们身上。如果您在首次加载页面时执行此代码,它将仅在初始文档中找到与选择器匹配的元素。如果 tr 元素是动态添加的,第一个版本将找不到它们,因此不会将单击事件绑定到它们。

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

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

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

所以一般规则是 外部选择器 应引用文档中的静态元素,而 内部选择器 指的是动态元素。

Stryner 10 年前

两者都不是真的 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,无论绑定时是否存在这些元素。但从技术上讲,这是一个与 #数据表tbody .

推荐文章

Jon · Android数据绑定库与Kotlin Android扩展

6 年前

Juliano Rafael · 雄辩的路由隐式绑定Laravel 5.6不起作用

6 年前

Artem · 将clicker绑定到DataTemplate UWP中的VM

6 年前

StriBog · Xamarin如何使用自定义数据创建customCell

6 年前

Nick Wills · Kotlin Android-无法使@BindingAdapter正常工作

6 年前

I. Mendoza · 如何在XAML页面中执行SetBinding和BindingContext?

6 年前

Harkan · JavaFX:将线绑定到两个窗格的中心

6 年前

CodyEakins · Laravel 5.6-路由模型与默认控制器绑定

6 年前

oudekaas · 角度2+,双向绑定,搜索json对象并显示结果问题

6 年前

Erik Thysell · c#wpf组合框将源绑定到一个集合,并将项作为另一个集合的属性

6 年前