Question

我希望这还没有被问到，我没有通过谷歌找到任何东西，我真的很好奇。昨天我遇到了一个错误。我的代码看起来像这样：

$(".button").click(function(){
    //Do something!
});

问题是，稍后通过AJAX加载了类.button，因此该事件从未触发过。我用这种方法解决了它：

$("body").on("click", ".button", function() {
    //Do something!
});

所以从昨天开始，我一直在考虑第一种方法的优点是什么（除了少数几个字符）。将所有处理程序连接到身体并仅在特定元素上解雇它是不是一种坏习惯吗？或者，为什么我不应该一直使用.on()可能会破坏我的代码？

Answer 1

.on也可以使用动态添加的dom对象

在早期版本的Jquery中，我们使用的是.live, .bind or .click等，但现在首选的是.on

请阅读此处的详细信息

http://api.jquery.com/on/

Difference between .on('click') vs .click()

Answer 2

＆＃34;将所有处理程序连接到身体并开火是不好的做法他们只在特定的元素？＆＃34;

是的，为每个事件使用委托是不好的做法。对于添加到正文的每个委托，每次事件发生在页面的任何位置时，都会评估选择器。

绑定事件的首选方法类似于第一个示例（或使用on方法执行等效操作），因为这会将事件直接绑定到元素。事件发生时，没有需要评估的选择器。

偶尔使用委托是一种方便的方法来处理你所拥有的情况，但是如果你开始在页面中获得许多委托，你应该考虑将它们直接绑定到元素上。

Answer 3

首先，你的两个代码之间的区别在于，你曾经将事件直接绑定到按钮上，然后将它绑定到body元素并委托给body中的任何.buttom元素（无所谓，当元素＆＃34; .button＆＃34;已创建。）

使用.on（＆＃39; event＆＃39;，＆＃39; selector＆＃39;，function（）{}）没有任何缺点，因为.click（function（）{}）是别名.on（＆＃39;点击＆＃39;，function（）{}）。

对于延迟绑定，你应该检查.delegate函数=＆gt; http://api.jquery.com/delegate/ 这会将事件绑定到现在或在功能中选择的任何元素。在你的情况下使用.on或.delegate没有什么区别，因为.on正在取代.delegate函数。不过我更喜欢使用.delegate，因为它更容易看到我在这里做的事情，并且在几年内更容易维护/理解代码。

$('body').delegate('.button', 'click', function() {
// Do something!
}

最后要提到的一点是，您应该避免将所有内容绑定到正文，文档或任何内容，并将其委托给给定项目。您应该尽可能精确地使用绑定来避免不必要的行为。当您定义希望发生变化的区域时，您可以维护，扩展和了解发生的情况。就像为内容使用容器一样。

使用“.on”时有什么缺点吗？

3 个答案: