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í?
¿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') : ''); } });