為什么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或省略，則事件在到達所選元素時始終被觸發。