Tengo una serie de listas horizontales dentro de una lista vertical. Cada elemento de la lista tiene un ID 'cr-id-x_y', donde x es el índice de elementos de la lista vertical e y es el índice de elementos de la lista horizontal. Creé un bucle for dentro de un bucle for para determinar a qué elemento de la lista se ha apuntado. El problema que tengo es que las pulsaciones de botón parecen dispararse dos veces (es decir, veo "Hola mundo" impreso en la consola dos veces al pulsar un botón). Por favor, ¿alguien puede decirme dónde me estoy equivocando?
document.getElementById("parent-list").addEventListener("click", function (e) { for (let x = 0; x < 100; x++) { for (let i = 0; i < 30; i++) { if ( e.target.closest(`#cr-id-${x}_${i}`) && (e.target.nodeName == "BUTTON" || e.target.parentElement.nodeName == "BUTTON") ) { console.log("Hello world"); } } } });A partir del código que publicaste, no es posible adivinar por qué se dispara dos veces, pero en realidad no hay necesidad de hacer un bucle. Cuando delega como lo hace, debería poder interrogar al objetivo en el que se hizo clic, por ejemplo, así
document.getElementById("parent-list").addEventListener("click", function(e) { const tgt = e.target; // or if nested e.target.closest('button'), then use tgt in the next if if (tgt.tagName==="BUTTON") { const someParent = tgt.closest('someElementThatMightHaveCRId'); if(someParent.id && someParent.id.startsWith('cr-id-')) { console.log("Hello world",someParent.id); } } })