javascript - 为什么在多次启动 $.click() 时，如果单击一次链接，它会多次捕获它？

Question

我有这样的东西:

function init(){
  $('.btn').click(function(){
    //do something;
  }
}

当通过 ajax 添加新内容时，我将调用 init()，以便单击事件应用于新按钮。但是当我点击它一次时，它会捕获多次点击(与我调用 init() 的次数一样多)。有道理，但如何避免呢？

jsFiddle 链接:http://jsfiddle.net/s2ZAz/8/

解决方案:
* 使用 $.delegate() - http://api.jquery.com/delegate/
* 使用 $.live() - http://api.jquery.com/live/

不太受欢迎，但仍然是解决方案:
* 使用 $.off() - http://api.jquery.com/off/或 $.unbind() - http://api.jquery.com/unbind/

Answer 1

click 说，“对于匹配选择器的每个对象，连接这个点击监听器”。您可能想要更像 delegate 的东西，它说“对于将匹配此选择器的每个对象，连接此监听器”。

$(document).delegate('button', 'click', function() {
});

如果您调用 init 两次，您仍然会得到双重回调，但以这种方式，您将必须调用 init 两次，因为随着新对象的添加，它们已经被分配给点击监听器。

请注意，根据下面 Greg 的评论，上面的 document 应该替换为最近的持久祖先。

Demo .

从 jQuery 1.7 开始，您可以优先使用 the .on() function达到同样的效果。

Demo .