Question

我是jQuery的新手并编写了以下代码。奇怪的是，即使在延迟之后，jQuery代码也能以某种方式工作。在延迟之后，alert（）会被调用onclick。使用.addEventListener（）的javascirpt中的相同内容会产生错误，因为元素不存在。有人可以解释一下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

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

查看this，了解使用.on和.click

之间的区别

Answer 2

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

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

使用常规js我假设您正在使用addEventListener，这需要您将事件绑定到特定对象。如果您确实尝试在#newTag之前直接使用它，那么它显然不会起作用。

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

选择

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

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

2 个答案: