`$(document).on("click", "a"` 和 `$("a").click(` 的区别是什么？

Question

能否有人告诉我这两个脚本之间的区别，我不是一个 JavaScript/jQuery 专家。

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

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

- Sreepathy Sp

---

我认为第一个将用于动态生成的元素。 - Sreepathy Sp

Answer 1

$(document).on("click", "a", function () {会绑定事件到a元素上，即使是在绑定事件时不存在的元素。这被称为事件委托。

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

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

- Tushar

Answer 2

第一种方法使用事件委托，即将事件绑定到存在于DOM中并满足选择条件的元素上，以及自动绑定添加到DOM中的任何符合选择器条件的元素。

而后一种方法只会绑定事件到现有元素上。

委托事件

委托事件的优点是可以处理稍后添加到文档中的后代元素的事件。通过选择在委派事件处理程序附加时保证存在的元素，您可以使用委派事件来避免经常附加和删除事件处理程序的需要。

- Adil

Answer 3

第一个函数将检查文档上的每个点击事件，并检查它是否来自于“a”标签，如果是，则执行代码，这对于动态创建的“a”标签也很重要。

第二个函数仅针对页面上已经存在的“a”元素执行代码。

- Saar