`$(document).on("click", "a"` 和 `$("a").click(` 之间的区别 [重复]答案

【问题标题】：Difference between `$(document).on("click", "a"` and `$("a").click(` [duplicate]`$(document).on("click", "a"` 和 `$("a").click(` 之间的区别 [重复]
【发布时间】：2016-01-21 14:58:38
【问题描述】：

谁能告诉我这两个脚本有什么区别，我不是 javascript/jquery 专家。

$(document).on("click", "a", function () {
    i = $(this).data("value");
    alert(i)
})

$("a").click(function () {
    i = $(this).data("value");
    alert(i)
});

【问题讨论】：

我认为第一个将是动态来的

标签： javascript jquery

【解决方案1】：

$(document).on("click", "a", function () { 将在绑定事件时不存在的a 元素上绑定事件。这称为event delegation。

事件委托允许我们将单个事件侦听器附加到父元素，该事件侦听器将为匹配选择器的所有后代触发，无论这些后代现在存在还是将来添加。

而 $("a").click(function () { 只会将事件绑定到 DOM 中存在的 a 元素。

【讨论】：

【解决方案2】：

第一个将检查文档的每次点击，并检查它是否来自“a”标签，如果是，则执行代码，这也与动态创建的“a”标签相关。

第二个将只为已经存在的“a”元素执行代码存在于页面上。

【讨论】：

【解决方案3】：

第一个给出event delegation，即它将事件与DOM中存在的元素绑定并满足选择条件+事件绑定后添加到DOM中的任何元素（满足选择器条件）将自动绑定为它会即时添加到 DOM。

虽然后者会将事件与现有元素绑定。

Delegated events

委托事件的优点是它们可以处理来自以后添加到文档中的后代元素。经过选择一个保证在该时间存在的元素附加了委托事件处理程序，您可以使用委托事件避免频繁附加和删除事件处理程序的需要。

【讨论】：