时间戳

首页 > 解决方案 > Javascript – 动态创建的元素上的事件委托不起作用

javascript - Javascript – 动态创建的元素上的事件委托不起作用

问题描述

对不起，另一个重复。

我正在尝试将单击事件侦听器绑定到稍后将动态创建的链接。不幸的是，这不起作用：

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如果这有所作为。（？）

感谢您提供有关如何使其工作的任何建议！

标签： javascriptdomaddeventlistener

解决方案

使用 时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>

推荐阅读