El objetivo es activar un evento haciendo clic en un elemento, lo que crearía un nuevo elemento con la misma etiqueta, clases y detector de eventos para crear otro elemento del mismo tipo...
const btn = document.querySelectorAll("button"); btn.forEach((b) => b.addEventListener("click", function () { console.log("Boom!"); b.insertAdjacentHTML("afterend", "<button class='button'>Boom</button>"); }) ); <button class="button">Boom</button>Sin embargo, cuando se crea dinámicamente un nuevo elemento, carece de detector de eventos a pesar de aplicar .querySelectorAll y .forEach. Entonces, ¿cómo crearía dinámicamente elementos con detectores de eventos?
Una solución en mi mente es agregar una clase (digamos myBtnEvent) a todos los botones y botones dinámicos y escuchar el evento de clic a nivel de documento. Ej: auge
document.addEventListener('click', function(event) { if(event.target && event.target.classList.contains('myBtnEvent')){ //do your stuff } });Puedes usarcloneNode para eso.
function duplicate(id) { const el = document.getElementById(id) const duplicateEl = el.cloneNode(true) const random = parseInt((Math.random() * 10000)); duplicateEl.id = id + "_" + random; // unique ID el.insertAdjacentElement("afterend", duplicateEl) } <button id="boom" class="button" onclick="duplicate(this.id)">Boom</button>