何时使用on(“选择器”)和何时启用(“选择器”、“选择器”)

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

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

它取代了现在不推荐的.live()方法

它用于直接将事件处理程序委托给元素/s(动态生成的“on go”)。

如果您使用$('.button').on('click',function(){，并且假设您动态生成一个按钮，那么单击该元素将不会有任何效果。

如果使用$('#navigation').on('click','.button',function(){，则将单击处理程序附加(委托)到任何当前和未来的.button元素，使其可单击。

其中$(document) (速度较慢)可以是父元素：$('#your_parent') (更快)

Answer 3

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

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