添加新元素时添加功能按钮
我正在研究人们在第一次学习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");
}
慕姐82654341回答
-
慕勒3428872
创建动态内容的问题是，当您添加元素时，此元素是裸的，这意味着没有任何事件侦听器。您在代码中添加的事件侦听器是现有按钮，不会传递到新按钮，您需要再次绑定新按钮。更一般地说，事件侦听器绑定到特定的元素，而不是像按钮这样的一般想法。您的解决方案非常简单，只需在元素创建后再次运行绑定即可。希望我帮助
随时随地看视频慕课网APP
相关分类
JavaScript