【发布时间】：2022-06-18 00:07:35
【问题描述】：
我在向动态创建的按钮添加“点击”事件侦听器时遇到了一些问题。原始的硬编码 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>
【问题讨论】：
-
您发布的代码为它在运行时找到的所有按钮添加了一个事件侦听器。后续添加的按钮不受影响。