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

Question

Sorry for another duplicate.

I'm trying to bind a click event listener to links which will be dynamically created later. Unfortunately this doesn't work:

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

Strangely it also doesn't work on a link which is not created dynamically. It is however working on the body , but that's not the target.

I also tried if (e.target.classList.contains("someclass")) {}

The DOM nodes are body->header->div->a if that makes a difference. (?)

Thanks for any advice on how to make it work!

Answer 1

When using target , sometimes the target is not the expected element.
See for example this code: the dynamically generated <a> have inner <span> Elements.
On click the target will be that span .

To get around that minor problem we can use the .closest() selector, in both cases, span or no 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>