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>

I also questioned this little ago, and i had a amazing answer:https://stackoverflow.com/q/70454829/17716837 — Laaouatni Anas, Jan 07 '22 at 10:30
See [What is DOM Event delegation?](https://stackoverflow.com/q/1687296) and [Event binding on dynamically created elements?](https://stackoverflow.com/q/203198). However, you have syntax errors in your code that prevent it from running - you should fix them first. — VLAZ, Jan 07 '22 at 10:33
Does this answer your question? [how to put a EventListener for all divs generated by JavaScript](https://stackoverflow.com/questions/70454829/how-to-put-a-eventlistener-for-all-divs-generated-by-javascript) — Junior, Jan 08 '22 at 11:07

score 0 · Accepted Answer · answered Jan 07 '22 at 10:40

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.

Attach event to dynamically created elements in javascript

1 Answers1