javascript - 如何使复选框适用于新创建的任务？

Question

我正在使用 vanilla JavaScript 编写一个待办事项应用程序，以便在不使用库的情况下学习这门语言。在应用程序中，您可以添加任务、完成任务或未完成任务、编辑和删除任务。我有以 HTML 格式显示功能的示例任务。我有一个功能，可以将任务添加到未完成的任务部分——每个任务项都包含在一个 li 标签中，并且有一个复选框、编辑和删除按钮。 addTask 函数完美运行。我遇到的问题是在选择框部分。 The app is designed in a way that when checkbox of a task is selected, it indicates a task is completed and thus the item is shown in the completed tasks section.该功能适用​​于页面上可用的项目，但不适用于使用添加功能添加的项目。我如何使新任务工作？谢谢。这是我的 HTML 代码:

<h3>Todo</h3>
<ul id="incomplete-tasks">
  <li><input type="checkbox"><label>Pay Bills</label><button>Edit</button><button>Delete</button></li>
</ul>

<h3>Completed</h3>
<ul id="completed-tasks">
  <li><input type="checkbox" checked></input><label>See Doctor</label><button>Edit</button><button>Delete</button></li>

这是我的 JS 代码:

var incompleteTasksHolder = document.getElementById("incomplete-tasks");
var completedTasksHolder = document.getElementById("competed-tasks");
var incompleteTextboxes = incompleteTasksHolder.querySelectorAll("input[type=checkbox]");


for (var i = 0; i < incompleteTextboxes.length; i++) {
  incompleteTextboxes[i].onfocus = function() {
    var item = this.parentNode;
    this.setAttribute("checked", "checked");
    completedTasksHolder.appendChild(item);
  }
}

Answer 1

您可能正在使用一些事件监听器在复选框更改值时将任务标记为已完成。

我认为您只是忘记了将此监听器绑定(bind)到您通过 Javascript 创建的新项目。

在创建新元素时将监听器绑定(bind)到它:
taskCB.addEventListener('change', toggleCompleted);


其中 taskCB 是复选框元素，toggleCompleted 是选中或取消选中任务复选框时触发的函数的名称。