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

【问题标题】：Why does jQuery behave differently than javascript?为什么 jQuery 的行为与 javascript 不同？
【发布时间】：2016-11-15 13:31:31
【问题描述】：

我是 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/

【问题讨论】：

什么意思javascirpt 中同样的事情会报错？想展示一下这个相同的东西是什么？
您已经展示了可以工作的 jQuery 代码，并询问为什么非 jQuery 代码不能...您认为这有什么问题吗？哦，您发布的内容不会做任何事情，因为问题中发布的代码中没有脚本标签
你的问题毫无意义。特别是“javascript中的相同内容会出错。”没有意义，因为 jQuery 是一个 JavaScript 库。
你的意思是问jQuery如何设法为尚不存在的元素上的事件附加事件处理程序？
话虽如此，我相信您的困惑是由事件委托引起的。如果将事件处理程序绑定到一个元素，然后在 DOM 中替换该元素，它不会接管绑定到旧元素的事件处理程序。但是在上面的 jQuery 中，没有任何东西绑定到 id #newTag 的元素，而是将 onclick 处理程序绑定到 #outerId，event.target 用于确定 #outerId 中的哪个元素实际被点击。绑定处理程序时，#newTag 的元素不存在并不重要，因为处理程序绑定到它的祖先。

标签： javascript jquery

【解决方案1】：

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

这是因为#outerId 是被绑定的对象，在调用on() 时它确实存在。当您追加#newTag 时，它不会改变外部绑定，它只是在单击时查看子级。

对于常规 js，我假设您使用的是 addEventListener，这需要您将事件绑定到特定对象。如果你在 #newTag 存在之前尝试直接在它上使用它，它显然是行不通的。

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

选择器

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

【讨论】：

【解决方案2】：

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

查看this 了解使用.on 和.click 之间的区别

【讨论】：