何时使用 on( "selector" ) 和何时使用 on( "selector" ， "selector" )

Question

使用 jQuery on() 1.7 版。我通常像这样绑定我的事件：

$(".foo").on("click", function() {
    console.log("foo clicked");
})

现在看到别人的代码后，我看到你也可以这样绑定，为特定元素指定一个辅助参数（不知道为什么这样写）：

$(document).on("click", ".bar", function() {
    console.log("bar clicked");
})

正如这把小提琴所见，他们都做同样的事情。

我总是像第一个代码示例一样直接绑定到元素，并且从未遇到任何问题。

我什么时候需要使用另一种绑定方式，一种方式比另一种方式有什么好处？

Answer 1

第二个代码示例等效于已弃用的现在.live()事件。因此，当您想要订阅 DOM 中尚不存在的 DOM 元素事件时，您将使用它（例如在 AJAX 调用后添加到 DOM 的元素）。

您的第一个示例完全等同于 $(".foo").click(function() { ... }); .

Answer 2

始终使用最近的父元素。 jQuery观察冒泡的事件，并在找到事件后立即附加它们，这称为事件委托。当你使用同样默认的document时，jQuery必须等到该元素而不是最接近的父元素。

您的第一个示例适用于将事件绑定到它们时应该存在的元素，而后来的方法适用于当前和新/动态创建的元素

Answer 3

$(document).on("click", ".bar", function() {
    console.log("bar clicked");
});

它代替了现已弃用的 .live() 方法
它用于将事件处理程序直接委派给元素（"随时随地"动态生成）

---

如果您使用$('.button').on('click',function(){并且假设您动态生成一个按钮 - 单击该元素将不执行任何操作。
如果使用$('#navigation').on('click','.button',function(){则单击处理程序将附加（委派）到任何当前和将来的.button元素，使其可单击。

$(document)（速度较慢）可以是父元素的位置：$('#your_parent')（速度更快）