为什么事件侦听器不使用我动态创建的按钮呢？(Javascript)

Question

我在向动态创建的按钮中添加“单击”事件侦听器时遇到一些问题。原始的、硬编码的html按钮不存在多次追加动态元素的问题，但是新元素中的动态按钮不会将事件侦听器传递给它们。当我点击它们时，什么都不会发生。

动态创建的按钮看起来确实有效，因为我可以将它们更改为提交按钮并重新加载页面，但仍然没有事件侦听器。

const title = document.querySelector(".tracker-title");
let btns = document.querySelectorAll(".add-btn");
btns.forEach(function (i) {
  i.addEventListener("click", function (e) {
    // e.preventDefault();
    count += 1;
    const element = document.createElement("div");
    element.classList.add("form-add-btn");
    element.classList.add("form-layout");
    const label = document.createElement("label");
    label.setAttribute("for", `${count}`);
    label.innerText = "Title";
    const input = document.createElement("input");
    input.setAttribute("placeholder", `ex. ${exampleArray[count - 3]}`);
    input.setAttribute("id", `${count}`);
    input.setAttribute("type", "text");
    const button = document.createElement("button");
    button.classList.add("add-btn");
    button.innerText = "Add";
    button.setAttribute("type", "button");

    title.appendChild(element);
    element.appendChild(label);
    element.appendChild(input);
    element.appendChild(button);

    btns = document.querySelectorAll(".add-btn");
  });
});

这是当我两次单击硬编码按钮时生成的html。

<div class="tracker-title">
  <div class="form-add-btn form-layout">
    <label for="3">Goal Title</label>
    <input type="text" placeholder="ex. Meditation" id="3">
    <button type="button" class="add-btn">ADD</button>
  </div>
  <div class="form-add-btn form-layout">
    <label for="4">Title</label>
    <input placeholder="ex. Exercise" id="4" type="text">
    <button class="add-btn" type="button">Add</button>
  </div>
  <div class="form-add-btn form-layout">
    <label for="5">Title</label>
    <input placeholder="ex. Studying" id="5" type="text">
    <button class="add-btn" type="button">Add</button>
  </div>
</div>

Answer 1

动态按钮没有应用于它们的事件侦听器。循环在其执行时(在创建数组后一次)将事件侦听器添加到列表中的所有按钮中，动态创建的按钮此时不在数组中，因此无法应用事件侦听器。如果您希望对所有按钮都使用相同的事件侦听器，则可以将事件侦听器作为函数创建，并将其解析为addEventListener函数，该函数也必须在创建新按钮后调用。我的版本：

const title = document.querySelector(".tracker-title");
let btns = document.querySelectorAll(".add-btn");
//Event listener function
function eventlistener(e) {
   //e.preventDefault();
   count += 1;
   const element = document.createElement("div");
   element.classList.add("form-add-btn");
   element.classList.add("form-layout");
   const label = document.createElement("label");
   label.setAttribute("for", `${count}`);
   label.innerText = "Title";
   const input = document.createElement("input");
   input.setAttribute("placeholder", `ex.`);
   input.setAttribute("id", `${count}`);
   input.setAttribute("type", "text");
   const button = document.createElement("button");
   button.classList.add("add-btn");
   button.innerText = "Add";
   button.setAttribute("type", "button");
   //Add eventlistener function to the new button
   button.addEventListener("click", eventlistener);
   title.appendChild(element);
   element.appendChild(label);
   element.appendChild(input);
   element.appendChild(button);
   btns = document.querySelectorAll(".add-btn");
}
btns.forEach(function (i) {
    //Add eventlistener function to exeisting buttons
    i.addEventListener("click", eventlistener);
});