1 回答

TA貢獻1839條經驗 獲得超15個贊
如果元素不存在于 DOM 中,則First ofdocument.querySelector方法將返回。null您不能調用addEventListenernull。它之所以起作用,jQuery是因為 jquery 構造了一個單獨的對象(稱為 jQuery 對象)。一個 jQuery 對象看起來有點像這樣:
{
0: {...} // HTMLElement reference
length: 1
} // jQuery object
該對象公開了一個 jQuery API,它具有on事件處理方法(無論是否存在實際 DOM 元素都可用)。這是 jQuery 的優點(也是缺點)。
另一方面,查詢選擇器方法返回HTMLElement. 如果該元素不存在于 DOM 中,則null返回。
現在假設該元素將在一定時間后出現在 DOM 中,您可以做兩件事:
等待元素出現在 DOM 中,一旦它可用,就添加一個監聽器函數。
在 JavaScript 中使用live事件(事件委托)。
我將向您展示第二種方法:
setTimeout(() => {
document.querySelector('#container').innerHTML = `<button id="btn">Click</button>`;
}, 3000);
document.addEventListener('click', (e) => {
if (e.target.id === 'btn') {
alert('Click works!');
}
});
<div id="container">
A button will appear after 3 seconds. However, click event would still work.
</div>
如您所見,我正在使用e.target
它來檢測我在文檔中單擊了哪個元素(我附加了偵聽器的位置)。一旦條件匹配,它就會觸發alert
. 這允許我們為最初不存在于 DOM 中的元素綁定事件。
添加回答
舉報