How to make event listener to keep working after elements are added to the DOM (pure js)-CodePudding

Hi,

I have this listener:

//close all detail tags when click happens outside
document.addEventListener('click', function(e) {
 if (!details.some(f => f.contains(e.target))) {
   details.forEach(f => f.removeAttribute('open'));
 } else {
   details.forEach(f => !f.contains(e.target) ? f.removeAttribute('open') : '');
 }
})

it automatically closes all the open details tags when a new one is clicked or you click anywhere on the page, that works fine. Problems arise when a new detail tag will be added dynamically then the listener wont work for them. I was reading other questions related and most suggested delegation but this doesnt seem to be the case because the listener should work for both normal tags and dynamic tags as well.

I tried some suggestions like this:

document.addEventListener('click', function(e){
    if(e.target && e.target.id== 'myDynamicallyAddedElementID'){
         //my code
    }
});

but no change. You can test it here https://jsfiddle.net/nxv03wjo/ and here https://jsfiddle.net/nxv03wjo/1/

Whats the trick here?

Thank you.

CodePudding user response：

Just retrieve the details elements inside the click listener?

document.addEventListener('click', function (e) {
    const details = [...document.querySelectorAll('details')];
    if (!details.some(f => f.contains(e.target))) {
        details.forEach(f => f.removeAttribute('open'));
    } else {
        details.forEach(f => !f.contains(e.target) ? f.removeAttribute('open') : '');
    }
});