Question

jQuery selector方法中on()的目的是什么？

在什么情况下

$("#fish").on("click", ".button", function() {
    // something
});

优于，比方说，

$("#fish").find(".button").on("click", function() {
    // something
});

我查看了jQuery documention并找到了：

如果省略selector或为null，则事件处理程序称为直接或直接绑定。每次在所选元素上发生事件时都会调用该处理程序，无论它是直接发生在元素上还是来自后代（内部）元素的气泡。

提供选择器时，事件处理程序称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，但仅适用于与选择器匹配的后代（内部元素）。 jQuery将事件从事件目标起泡到附加处理程序的元素（即最里面到最外层的元素），并为该路径上与选择器匹配的任何元素运行处理程序。

我说的不同之处在于，在我的第一个示例中，事件绑定到#fish，但只监听从.buttons冒出的事件，而在第二个示例中该事件是否绑定到.buttons？如果是这样，这有什么影响？：S

因此，如果事件绑定到#fish，当您单击.button时，无论如何都知道单击了哪个.button？这将引用#fish而不是.button，对吗？

Answer 1

示例＃1将为动态创建的按钮绑定事件，只要它们是#fish的后代即可。绑定后创建的任何按钮都会调用单击处理程序。如果您不想选择祖先元素，也可以绑定到$(document)。

示例＃2仅绑定绑定时DOM中的按钮。任何动态创建的元素都不会收到处理程序。

在这两个示例中，this和$(this)都会引用已点击的按钮，而不是#fish。

看看这个jsFiddle的演示。您会在控制台中看到this指的是按钮#fish。

$('#fish').on('click', '.button', function(){
    console.log(this.id);
});

Answer 2

是的，这是正确的。当您使用选择器调用on方法时，它会创建委派事件。

$("#fish").on("click", ".button", function() {

与：

相同

$("#fish").delegate(".button", "click", function() {

事件绑定到#fish元素，但它只调用事件处理程序以获取.button元素的点击次数。这意味着绑定元素时，.button元素不一定存在，只有#fish元素。

jQuery on（）选择器

2 个答案: