11

selectorjQueryon()方法中的目的是什么？

在什么情况下

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

比，说，

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

?

我查看了jQuery 文档并发现：

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

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

我是否正确地说不同之处在于，在我的第一个示例中，事件绑定到#fish，但仅侦听从 冒泡的事件.buttons，而在第二个示例中，事件绑定到每个.buttons？如果是这样，这意味着什么？:S

因此，如果事件绑定到#fish，当您单击 .button 时，是否知道单击了哪个 .button？这将指的是#fish 而不是.button，对吗？

4

2 回答 2

12

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

Example #2 只会绑定到绑定时 DOM 中的按钮。任何动态创建的元素都不会收到处理程序。

在这两个示例中，this和$(this)将指的是被点击的按钮，而不是#fish.

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

$('#fish').on('click', '.button', function(){
    console.log(this.id);
});
于 2013-06-20T08:57:43.577 回答
4

对，那是正确的。当您on使用选择器调用该方法时，它会创建一个委托事件。

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

与以下内容相同：

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

该事件绑定到#fish元素，但它仅调用事件处理程序以单击.button元素。这意味着.button当你绑定元素时，元素不必存在，只有#fish元素。

于 2013-06-20T08:57:21.537 回答