jQuery on()选择器

Question

selectorjQuery on()方法的目的是什么？

在什么情况下

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

比说更好

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

？

我查看了jQuery文档,发现:

如果省略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);
});