将事件附加到javascript中动态创建的元素

Question

我正在尝试将 HTML 数据动态插入到动态创建的表中，但是当我尝试为动态创建的按钮附加 addEventListner 时，事件不会触发。解决方案将不胜感激。

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

您应该注意到，在创建另一个 dynamic 部件之前，您获得了 updateDelete。你可以登录updateDelete，你会发现它神经变了。

因此您可以将点击侦听器绑定到更高级别的元素，如下所示：

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

或者为您动态创建的每个按钮添加点击监听器。