我在每个 li 元素之后通过 Javascript 创建按钮元素。但是，事件监听器不适用于这些按钮。事件监听器绑定(bind)到带有文本“Enter”的按钮，该文本已经在 HTML 中并且不是动态创建的，可以正常工作。因此，我相信这个问题与我使用 Javascript 创建按钮有关。我怀疑这可以通过事件委托(delegate)来解决，但我不知道如何解决。
以下是我的 HTML:
<!DOCTYPE html>
<html>
<head>
<title>Javascript + DOM</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="Enter items">
<button id="enter">Enter</button>
<ul>
<li class="bold red" random="23">Notebook
</li>
<li>Jello</li>
<li>Spinach</li>
<li>Rice</li>
<li>Birthday Cake</li>
<li>Candles</li>
</ul>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
以下是我的 JavaScript:
var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var shoppingItem = document.getElementsByTagName("li");
var ul = document.getElementsByTagName("ul")[0];
function inputLength() {
return input.value.length;
}
function createListElement() {
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
var ul = document.getElementsByTagName("ul")[0];
ul.appendChild(li);
input.value = "";
return li;
}
function addElementAfterClick() {
if (inputLength() > 0) {
createListElement();
}
}
function addElementAfterPress(event) {
if (inputLength() > 0 && event.keyCode === 13) {
createListElement();
}
}
function addLineThroughEvent(element) {
element.addEventListener("click", function() {
element.classList.toggle("done");
});
}
function addDeleteButton(element) {
var del = document.createElement("button");
del.addEventListener("click", function () { // This doesn't work
alert("You clicked")
})
del.appendChild(document.createTextNode("Delete"));
element.insertAdjacentHTML("afterend", del.outerHTML);
}
input.addEventListener("keypress", addElementAfterPress);
Array.from(shoppingItem).forEach(addLineThroughEvent);
Array.from(shoppingItem).forEach(addDeleteButton);
button.addEventListener("click", addElementAfterClick);
我知道我可以使用 jQuery 解决这个问题。但是，我需要能够使用 Javascript 来解决这个问题。
最佳答案
您仅添加按钮 HTML，其中不包括事件监听。您需要使用 insertAdjacentElement 附加按钮的 DOM 元素。
另外，动态添加li后需要调用addDeleteButton
var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var shoppingItem = document.getElementsByTagName("li");
var ul = document.getElementsByTagName("ul")[0];
function inputLength() {
return input.value.length;
}
function createListElement() {
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
var ul = document.getElementsByTagName("ul")[0];
ul.appendChild(li);
addDeleteButton(li)
input.value = "";
return li;
}
function addElementAfterClick() {
if (inputLength() > 0) {
createListElement();
}
}
function addElementAfterPress(event) {
if (inputLength() > 0 && event.keyCode === 13) {
createListElement();
}
}
function addLineThroughEvent(element) {
element.addEventListener("click", function() {
element.classList.toggle("done");
});
}
function addDeleteButton(element) {
var del = document.createElement("button");
del.addEventListener("click", function () { // This doesn't work
alert("You clicked")
})
del.appendChild(document.createTextNode("Delete"));
element.insertAdjacentElement("afterend", del);
}
input.addEventListener("keypress", addElementAfterPress);
Array.from(shoppingItem).forEach(addLineThroughEvent);
Array.from(shoppingItem).forEach(addDeleteButton);
button.addEventListener("click", addElementAfterClick);<!DOCTYPE html>
<html>
<head>
<title>Javascript + DOM</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="Enter items">
<button id="enter">Enter</button>
<ul>
<li class="bold red" random="23">Notebook
</li>
<li>Jello</li>
<li>Spinach</li>
<li>Rice</li>
<li>Birthday Cake</li>
<li>Candles</li>
</ul>
<script type="text/javascript" src="script.js"></script>
</body>
</html>关于javascript - 事件监听器无法使用纯 Javascript 动态创建的按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51211947/