Javascript – 動態創建元素的事件委托不起作用

Question

對不起，另一個重復。

我正在嘗試將單擊事件偵聽器綁定到稍后將動態創建的鏈接。 不幸的是，這不起作用：

document.querySelector('body').addEventListener('click', function(e) {
    if (e.target.tagName.toLowerCase() === 'a') {
        e.preventDefault();
        console.log("click")
    }
});

奇怪的是，它也不適用於不是動態創建的鏈接。 然而，它正在對body起作用，但這不是目標。

我也試過if (e.target.classList.contains("someclass")) {}

DOM 節點是body->header->div->a如果有區別的話。 （？）

感謝您提供有關如何使其工作的任何建議！

Answer 1

使用target時，有時目標不是預期的元素。
例如看這段代碼：動態生成的<a>有內部<span>元素。
單擊時， target將是那個span 。

為了解決這個小問題，我們可以使用.closest()選擇器，在這兩種情況下，跨度或無跨度：

 document.querySelector('body').addEventListener('click', function(e) { if (e.target.closest('a')) { // All oyu need e.preventDefault(); console.log("click") } }); setTimeout(() => { document.querySelector("#links").insertAdjacentHTML("beforeend", ` <a href="#"><span>One</span></a> <a href="#"><span>Two</span></a> `); }, 1000);

 <header><div id="links"></div></header>