为什么jQuery的行为与javascript不同？

Question

我是jQuery新手，并编写了以下代码。 奇怪的是，即使经过时间延迟，jQuery代码还是可以正常工作。 时间延迟后，alert（）被称为onclick。 javascirpt中带有.addEventListener（）的同一事物将产生错误，因为该元素不存在。 有人可以解释一下jQuery为何以及为什么这样做吗？

<div id="outerId" class="outerHolder">
  <div class="innerHolder"></div>
</div>

JS代码：

$("#outerId").on("click touchstart", "#newTag", function (e) {
    alert("OK");
});

setTimeout(function() {
    var tag = '<div id="newTag">Hello World</div>';                  
    $("#outerId").append(tag);
}, 5000);

这是相同的jsFiddle： https ://jsfiddle.net/jb6pmovb/

Answer 1

如果您想知道单击如何在页面加载时不存在的元素上起作用，那是因为您要将侦听器附加到externalDiv上并使用.on

看看这对两者的区别.on和.click

Answer 2

我的猜测是您的查询是关于on()绑定到对象的方式。 首次运行on() ， #newTag不存在，因此您可能想知道为什么在延迟后附加时仍触发它。

这是因为#outerId是要绑定的对象，在on()调用时确实存在。 当您附加#newTag ，它不会更改外部绑定，只在单击它们时才查看子项。

对于常规js，我假设您正在使用addEventListener ，这需要将事件绑定到特定对象。 如果您确实尝试在#newTag上直接使用它，则显然将无法使用。

---

您可以通过文档查看on() ：

选择器

类型：字符串一个选择器字符串，用于过滤触发事件的所选元素的后代。 如果选择器为null或省略，则事件在到达所选元素时始终被触发。