Question

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

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

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

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

如此fiddle所示，他们都做同样的事情。

我总是像第一个代码示例一样直接绑定到元素，并且永远不会有任何问题。

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

Answer 1

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

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

Answer 2

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

而不是现在已弃用的.live()方法它是将你的事件处理程序直接委托给element / s（动态生成的'on the go'）

如果你使用$('.button').on('click',function(){并假设你动态生成一个按钮 - 点击该元素就什么都不做了。
如果您使用$('#navigation').on('click','.button',function(){，则会将点击处理程序附加（委派）给任何现有和将来的.button元素，使其可以点击。

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

Answer 3

始终使用最近的父元素。 jQuery监视事件冒泡并在找到事件后立即附加它们，这称为事件委派。当你使用document这也是默认值时，jQuery必须等到那个而不是被点击元素的最接近的父元素。

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

何时使用on（“选择器”）和何时打开（“选择器”，“选择器”）

3 个答案: