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()选择器，在两种情况下都使用span或不使用span：

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>