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

Question

I am trying to make a to-do list and the check boxes in the exisiting li elements work but whenever I add a new li element, the checkbox doesn't work.我正在尝试制作一个待办事项列表，并且现有 li 元素中的复选框可以工作，但是每当我添加一个新的 li 元素时，该复选框都不起作用。 How do I add the event listener to newly created li elements?如何将事件侦听器添加到新创建的 li 元素？ I am a beginner in javascript so I don't really know a lot but it would be very helpful if someone here helped.我是 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");
    }
  });
});

Here's the html code:这是 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>

Answer 1

The issue you are having is that the const toDoList is defined on page load.您遇到的问题是const toDoList是在页面加载时定义的。 When you add a new li to the DOM it's not binded to the eventlissener .当您向DOM添加新的li时，它不会绑定到eventlissener 。

A possble solution would be to reanable the eventlissner like this:一个可能的解决方案是像这样重新启用eventlissner ：

todoList.removeEventListener("click");
// get the todoList items again
todoList.addEventListener("click", when_clicked());

Note you need to change your const toDoList to either let toDoList or var toDoList .请注意，您需要将const toDoList更改为let toDoList或var toDoList 。

Also I recoment to fire a function when the elemt is clicked instead of handeling it within the event.我还建议在单击元素时触发 function 而不是在事件中处理它。

I took toDoList as an wxample but you shoeld do this on all the other elements that can change and has an an lissener我将toDoList作为 wxample，但您必须在所有其他可以更改并具有 lissener 的元素上执行此操作

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

问题描述

1 个解决方案

解决方案1
0 2020-06-05 14:12:59

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

问题描述

1 个解决方案

解决方案1 0 2020-06-05 14:12:59

解决方案1
0 2020-06-05 14:12:59