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

0

127
Views
Cómo hacer que el detector de eventos siga funcionando después de agregar elementos al DOM (js puro)

Tengo este oyente:

 //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') : ''); } })

cierra automáticamente todas las etiquetas de detalles abiertas cuando se hace clic en una nueva o cuando hace clic en cualquier parte de la página, eso funciona bien. Los problemas surgen cuando se agrega dinámicamente una nueva etiqueta de detalle, entonces el oyente no funcionará para ellos. Estaba leyendo otras preguntas relacionadas y la delegación más sugerida, pero este no parece ser el caso porque el oyente también debería funcionar tanto para etiquetas normales como para etiquetas dinámicas.

Intenté algunas sugerencias como esta:

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

pero sin cambios. Puedes probarlo aquí https://jsfiddle.net/nxv03wjo/ y aquí https://jsfiddle.net/nxv03wjo/1/

¿Cuál es el truco aquí?

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

0

¿Simplemente recuperar los elementos de details dentro del oyente de clics?

 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