The goal is to fire an event by clicking on an element, which would create a new element with the same tag, classes and event listener to create another element of the same kind...
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>However, when a new element is dynamically created it lacks event listener despite apllying .querySelectorAll and .forEach. So how would I dynamically create elements with event listeners?
One solution in my mind is to add a class (say myBtnEvent) to all the buttons and dynamic buttons and listen to click event at document level. Ex: Boom
document.addEventListener('click', function(event) {
if(event.target && event.target.classList.contains('myBtnEvent')){
//do your stuff
}
});You can use cloneNode for that.
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>