添加新元素时添加功能按钮

Question

我正在研究人们在初次学习时遇到的经典购物清单问题 JavaScript。所以我可以很好地向列表中添加新元素，但是当我尝试使用删除按钮删除这些项目时，这些项目不会被删除。

切换按钮也不起作用。有人可以帮忙吗？

这是我的代码：

<!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> Notebook <button class="Delete">Delete!</button></li>
        <li>Jello <button class="Delete">Delete!</button></li> 
        <li>Spinach <button class="Delete">Delete!</button></li>
        <li>Rice <button class="Delete">  Delete!</button></li>
        <li>Birthday Cake <button class="Delete"> Delete!</button></li>
        <li>Candles <button class="Delete"> Delete!</button></li>
    </ul>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

这是JavaScript，我不知道是什么问题：

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var li = document.querySelectorAll("li");
var deleteButtons = document.getElementsByClassName("Delete");

function inputLength() {
    return input.value.length;
}

function createListElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);

    var button = document.createElement("button");
    button.appendChild(document.createTextNode("Delete!"));
    button.classList.add("Delete")

    li.appendChild(button);


}

function addListAfterClick() {
    if (inputLength() > 0) {
        createListElement();
    }
}

function addListAfterKeypress(event) {
    if (inputLength() > 0 && event.keyCode === 13) {
        createListElement();
    }
}



button.addEventListener("click", addListAfterClick);

input.addEventListener("keypress", addListAfterKeypress);

for(var i=0; i<li.length; i++){
 li[i].addEventListener("click", liClick);
}
function liClick(){
  this.classList.toggle("done");
}



input.value = "";
for(var i=0; i<li.length; i++){
    li[i].addEventListener("click", liClick);
}
function liClick(){
    this.classList.toggle("done");
}

for (var i = 0; i < deleteButtons.length; i ++){
    deleteButtons[i].addEventListener("click", deleteItem)
}
function deleteItem(){
    this.parentElement.remove();
}

Answer 1

创建动态内容的问题在于，当您添加一个元素时，该元素是裸露的，即没有任何事件侦听器。您在代码中添加到 existing 按钮的事件侦听器不会传递给新按钮，您需要重新绑定新按钮。更一般地说，事件侦听器绑定到特定元素，而不是像按钮这样的一般概念。您的解决方案非常简单，只需运行在元素创建后再次绑定。希望我有帮助

添加新元素时添加功能按钮

Adding functional buttons when new elements are added

javascript

dom-events