• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

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

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/

What's the trick here?

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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') : '');
    }
});
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error