我试图创建一个待办事项列表，现有li元素中的复选框可以工作，但是每当我添加新的li元素时，复选框就不工作了。 如何将事件侦听器添加到新创建的li元素中？ 我是一个javascript的初学者，所以我知道的并不多，但是如果有人在这里提供帮助，将会非常有帮助。
const todoList = document.querySelector("#list ul");
todoList.addEventListener("click", (e) => {
if (e.target.className == "delete") {
const li = e.target.parentElement.parentElement;
todoList.removeChild(li);
}
});
const form = document.querySelector("#add-todo");
form.addEventListener("submit", (e) => {
e.preventDefault();
const value = form.querySelector('input[type="text"]').value;
const li = document.createElement("li");
const label = document.createElement("label");
const input = document.createElement("input");
const name = document.createElement("span");
const deleteBtn = document.createElement("span");
input.setAttribute("type", "checkbox");
input.setAttribute("class", "input");
name.textContent = " " + value;
deleteBtn.textContent = "Delete";
name.setAttribute("class", "name");
deleteBtn.setAttribute("class", "delete");
label.appendChild(name);
label.appendChild(deleteBtn);
li.appendChild(input);
li.appendChild(label);
todoList.appendChild(li);
});
//check your todo
const check = document.querySelectorAll(".input");
Array.from(check);
check.forEach((checkbox) => {
checkbox.addEventListener("click", (e) => {
const li = e.target.parentElement;
if (e.target.className == "input") {
li.classList.add("done");
}
});
});
以下是html代码:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>To-do list App</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<header>
<div id="page-header">
<h1>To-do List</h1>
<p>Write your todos</p>
</div>
</header>
<form id="list">
<h2 class="title">Here's your daily to-do list</h2>
<ul class="form-list">
<li>
<input type="checkbox" class="input"/>
<label>
<span class="name">Do the dishes</span>
<span class="delete">Delete</span>
</label>
</li>
<li>
<input type="checkbox" class="input"/>
<label>
<span class="name">Do the dishes</span>
<span class="delete">Delete</span>
</label>
</li>
<li>
<input type="checkbox" class="input"/>
<label>
<span class="name">Do the dishes</span>
<span class="delete">Delete</span>
</label>
</li>
<li>
<input type="checkbox" class="input"/>
<label>
<span class="name">Do the dishes</span>
<span class="delete">Delete</span>
</label>
</li>
</ul>
</div>
</form>
<form id="add-todo">
<input type="text"placeholder="Add a to-do....">
<button>Add</button>
</form>
</div>
<script src="app.js"></script>
</body>
</html>
您遇到的问题是常量TODOLIST是在页面加载时定义的。 当您将新的LI添加到DOM时，它不会绑定到EventLissener。
一个可行的解决方案是如下所示可重用EventLissner:
todoList.removeEventListener("click");
// get the todoList items again
todoList.addEventListener("click", when_clicked());
注意:您需要将const TODOLIST更改为let TODOLIST或var TODOLIST。
此外，我建议在点击elemt时激发一个函数，而不是在事件中处理它。
我将toDolist作为一个wxaples，但是您必须在所有其他可以更改的元素上执行此操作，并且具有一个lissener
