He mirado publicaciones similares pero parece que no puedo encontrar una solución.
Entonces, el problema al que me enfrento es que agrego dinámicamente divs con contenido. Si hace clic en ese contenido generado, sucede algo. El problema es que el evento clicklick se activa varias veces. Lo interesante es que en realidad comienza con solo 1 disparador, sube a 2, 4, 6, 10, 20, 40, etc. disparadores por clic.
function AddArticle() { let single_article = document.createElement("div"); single_article.setAttribute("class", "each-article"); single_article = `<div> ANY ARTICEL </div>`; let prices_summary = document.getElementById('prices-summary'); prices_summary.appendChild(single_article); //Refresh the Event since we added on DIV to the NodeList RefreshClickEvent(); } function RefreshClickEvent() { let each_article = document.querySelectorAll(".each-article"); for (let article of each_article ) { article.addEventListener('click', () => { console.log("Trigger."); }); } } Console Log OutPut: Trigger. [2]Trigger. [4]Trigger. . . . [90]Trigger.Agradezco cualquier ayuda.
Cuando agrega un elemento, el bucle en RefreshClickEvent funciona para todos los elementos (incluidos los elementos que se agregaron). Por lo tanto, debe definir un parámetro para agregar un evento a un elemento. Otro error de innerHTML para asignar contenido.
function AddArticle() { let single_article = document.createElement("div"); single_article.setAttribute("class", "each-article"); single_article.innerHTML = `<div> ANY ARTICEL </div>`; let prices_summary = document.getElementById('prices-summary'); prices_summary.appendChild(single_article); //Refresh the Event since we added on DIV to the NodeList RefreshClickEvent(single_article); } function RefreshClickEvent(element) { element.addEventListener('click', () => { console.log("Trigger."); }); }