3

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

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

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

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

正如在这个小提琴中看到的，他们都做同样的事情。

我总是直接绑定到第一个代码示例中的元素，并且从来没有任何问题。

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

4

3 回答 3

4

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

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

于 2012-06-24T19:30:32.537 回答
3 
$(document).on("click", ".bar", function() {
    console.log("bar clicked");
});

它不是现在不推荐使用的.live()方法
，而是将您的事件处理程序直接委托给元素/s（动态生成的'on the go'）

如果您使用$('.button').on('click',function(){并假设您动态生成一个按钮 - 单击该元素将无济于事。
如果您使用$('#navigation').on('click','.button',function(){点击处理程序被附加（委托）到任何现在和未来的.button元素，使其可点击。

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

于 2012-06-24T19:31:27.053 回答
3

始终使用最近的父元素。jQuery 监视冒泡的事件，并在找到事件后立即附加它们，这称为事件委托。当您使用documentwhich 也是默认值时，jQuery 必须等待，而不是单击元素的最近父元素。

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

于 2012-06-24T19:32:48.703 回答