Estoy tratando de insertar datos HTML dinámicamente en una tabla que se crea dinámicamente, pero cuando intento adjuntar un addEventListner para el botón que se crea dinámicamente, el evento no se activa. Se agradecería la solución.
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>Debería notar que obtiene updateDelete antes de crear otra parte dynamic . Puede iniciar sesión updateDelete y encontrará que no ha cambiado.
Por lo tanto, podría vincular un oyente de clics a un elemento de nivel superior, como este:
put.addEventListener('click', function (e) { if (e.target.classList.contains('active-update')) { console.log('click') } })O agregue un oyente de clics a cada botón que creó dinámicamente.