-1

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?

Slav Konovalov
  • 11
  • 3
  • 2
    Does this answer your question? [Attach event to dynamic elements in javascript](https://stackoverflow.com/questions/34896106/attach-event-to-dynamic-elements-in-javascript) – Kevin Jan 17 '22 at 13:32
  • Yes, thank you! Event delegation it is! – Slav Konovalov Jan 17 '22 at 17:19

2 Answers2

1

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
     }
 });
Pavan J
  • 353
  • 1
  • 3
  • 12
0

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>
gru
  • 2,319
  • 6
  • 24
  • 39
  • Thanks! That's a interesting one! .cloneNode() is a new one to me. However, Event Delegation seems to be the most elegant solution. – Slav Konovalov Jan 17 '22 at 17:49