Attach event to dynamically created elements in javascript

Question

I'm trying to insert HTML data dynamically to a table that is dynamically created, but when I try to attach an addEventListner for the button that is dynamically created the event is not firing. The solution would be appreciated.

 const put = document.querySelector(".puthere"); const v1 = document.querySelector(".v1"); const v2 = document.querySelector(".v2"); const create = document.querySelector(".create"); const updateDelete = document.querySelector(".update-delete"); const update = document.querySelectorAll(".active-update"); const dynamic = document.querySelector(".dynamic"); //FUNCTIONS const operations = function (v1, v2) { const html = ` <tr class = "update-delete"> <td> <input type="${v1}"></td> <td ><input type="${v2}"></td> <td> <button class = "active-update" data-set=".active-update"> UPDATE</button></td> <td> <button > ❌ </button></td> </tr>`; put.insertAdjacentHTML("beforeend", html); }; //CREATE TABLE COLUMNS create.addEventListener("click", function (e) { operations(v1.value, v2.value); }); //Ataching eventlistner to parent element updateDelete.addEventListener("click", function (e) { if(e.target.classList.contains('active-update'){ console.log('click)}) });

 <div > <table class = "puthere"> <tr class="dynamic"> <th>BOOKS</th> <th class = "books">PRICE</th> <th > <button class="create" > CREATE</button> </th> </tr> <tr class = "update-delete dynamic"> <td><input type="text" class="v1"></td> <td><input type="text" class="v2"></td> <td> <button class = "active-update" data-set=".active-update"> UPDATE </button></td> <td> <button > ❌ </button></td> </tr> </table> </div>

Answer 1

You should notice that you get updateDelete before you create another dynamic part. You could log updateDelete and you will find that it nerver changed.

So you could bind a click listener to higher level element, like this:

put.addEventListener('click', function (e) {
  if (e.target.classList.contains('active-update')) {
    console.log('click')
  }
})

Or add click listener to every button you created dynamically.