Javascript 新添加的元素复选框不起作用

我试图创建一个待办事项列表，并且现有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代码：

待办事项列表应用程序
待办事项清单
写下你的待办事项

这是你每天要做的事情清单


洗碗
删除


洗碗
删除


洗碗
删除


洗碗
删除


添加

您遇到的问题是

常量toDoList

是在页面加载时定义的。 将新的

li

添加到

DOM

时，它不会绑定到

eventlissener

一个可能的解决方案是重新启用

eventlissner

，如下所示：

todoList.removeEventListener（“单击”）；
//再次获取todoList项目
todoList.addEventListener（“单击时单击（））；

注意您需要将

const-toDoList

更改为

let-toDoList

或

var-toDoList

我还建议在单击元素时启动函数，而不是在事件中处理它

---

我以

toDoList

为例，但您应该在所有其他可以更改且具有lissener的元素上执行此操作，请同时发布HTML代码。