Javascript 为什么在多次启动$.click（）时，如果链接被单击一次，它会多次捕获它？

我有点像：

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

当通过ajax添加新内容时，我将调用

init（）

，这样单击事件将应用于新按钮。但当我单击它一次时，它会捕获几次单击（与我调用

init（）

的次数相同）。这是有道理的，但如何避免呢

JSIDLE链接：

解决方案：
*使用$.delegate（）-
*使用$.live（）-

不太受欢迎的解决方案：

---

*使用$.off（）或$.unbind（）-

可以使用

unbind

方法删除事件处理程序（如果使用新的jQuery 1.7语法附加处理程序，则使用

off

方法）

---

更好的是，您可以使用

live

方法，为将来添加到页面中的任何元素设置事件处理程序，并匹配给定的选择器。通过这种方式，您只需调用init一次。

您可以使用

取消绑定

方法删除事件处理程序（如果您使用新的jQuery 1.7语法来附加处理程序，则使用

关闭

方法）

更好的是，您可以使用

live

方法，为将来添加到页面中的任何元素设置事件处理程序，并匹配给定的选择器。这样，您只需调用init一次。

单击

会说，“对于与选择器匹配的每个对象，连接此单击侦听器”。您可能需要更像

delegate

的东西，上面写着“对于与此选择器匹配的每个对象，连接此侦听器”

如果您两次调用

init

，仍然会得到两次回调，但通过这种方式，您不必两次调用

init

，因为添加新对象时，它们已经被分配给单击侦听器

请注意，根据格雷格下面的评论，上面的

文档

应替换为最近的持久祖先

由于jQuery1.7，您最好使用它来实现相同的效果

.

单击

表示，“对于与选择器匹配的每个对象，连接此单击侦听器”。您可能需要更像

delegate

的东西，上面写着“对于与此选择器匹配的每个对象，连接此侦听器”

如果您两次调用

init

，仍然会得到两次回调，但通过这种方式，您不必两次调用

init

，因为添加新对象时，它们已经被分配给单击侦听器

请注意，根据格雷格下面的评论，上面的

文档

应替换为最近的持久祖先

由于jQuery1.7，您最好使用它来实现相同的效果

.

$（“body”）。委托（“按钮”，“单击”，函数（）{
警惕（“我很讨厌！”）；
});
$（'div'）.append（“单击我，我将提醒两次
”）；
$（'div'）.append（“单击我，我将发出一次警报
”）；
$（'div'）.append（“单击我，我将不发出任何警报
”）；

$（“body”）。委托（“按钮”，“单击”，函数（）{
警惕（“我很讨厌！”）；
});
$（'div'）.append（“单击我，我将提醒两次
”）；
$（'div'）.append（“单击我，我将发出一次警报
”）；
$（'div'）.append（“单击我，我将不发出任何警报
”）；

---

正如David所提到的，并且根据liho的代理示例（喜欢小提琴级联警报会弹出多少次！！），问题在于多个绑定，可以通过

.live（）

（不推荐）或

.delegate（）

（被淘汰），或

.on（）

（首选）解决。但是，就性能而言，委派听文档，甚至是

body

节点都是错误的

一个更好的方法是识别一个不会被破坏的按钮的祖先

body

是一个简单的选择，但我们几乎总是使用某种包装器元素构建页面，这些元素嵌套在比

body

更深的一个或多个级别，因此允许设置更少的侦听器

HTML:

---

正如David提到的，并且根据liho的代理示例（喜欢小提琴级联警报会弹出多少次！！），问题在于多个绑定，可以通过

.live（）

（不推荐）或

.delegate（）

（被淘汰）或

.on（）

（首选）解决。但是，就性能而言，委派听文档，甚至是

body

节点都是错误的

一个更好的方法是识别一个不会被破坏的按钮的祖先

body

是一个简单的选择，但我们几乎总是使用某种包装器元素构建页面，这些元素嵌套在比

body

更深的一个或多个级别，因此允许设置更少的侦听器

HTML:

---

那么它与.live（'click'）相同吗？从不知道委托（）；酷，谢谢@shershams是的，只是它不会在1.7中被弃用，并且它支持根元素而不是整个文档。@GregPettit如果问题是JSFIDLE，我为什么要复制粘贴它？我做了一个简单的更改并保存它。这比解释怎么做要简单得多，任何聪明的人都可以用谷歌搜索函数的变化，并亲自查看API文档。这是一个相当糟糕的答案。。。如果JSFIDLE坏了怎么办？你也应该用文字解释解决方案。@FelixKling答案很差，因为JSFIDLE可能会下降？这是问答论坛，不是维基。所以它和.live（'click'）一样吗？从不知道委托（）；酷，谢谢@shershams是的，只是它不会在1.7中被弃用，并且它支持根元素而不是整个文档。@GregPettit如果问题是JSFIDLE，我为什么要复制粘贴它？我做了一个简单的更改并保存它。这比解释怎么做要简单得多，任何聪明人都可以用谷歌搜索函数更改并查看API文档

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

$("body").delegate("button", "click", function() {
    alert('I\'m annoying!');
});

$('div').append("<button>Click me, I will alert twice</button><br/>");

$('div').append("<button>Click me, I will alert once</button><br/>");

$('div').append("<button>Click me, I will not alert at all</button><br/>");

<div id="someWrapper">
  <div class="somethingThatGetsDestroyed">
    <button>Click Me</button>
  </div>
</div>

$('#someWrapper').on('click', 'button', function() {
  alert('Clickity-click!');
});