待办应用添加新元素后完成按钮触发两次、旧按钮失效问题求助

问题根源 #

1. 旧按钮看似失效：每次添加新待办时调用checkButton()，该函数会遍历所有.checkicon元素并重复绑定点击事件。旧按钮被多次绑定事件后，点击一次会触发多次回调，导致勾选状态瞬间切换两次，看起来像没有响应。
2. 新按钮触发两次事件：初始页面加载时调用checkButton()，此时新按钮还未创建；添加新待办后再次调用checkButton()，新按钮被绑定一次事件。但重复绑定的逻辑加上可能的事件冒泡，最终导致点击新按钮时触发两次回调。

最优解决方案：事件委托 #

不再给每个按钮单独绑定事件，而是利用事件冒泡机制，把点击事件绑定在待办列表的父容器（todoItemList）上。这样无论初始还是新添加的按钮，点击时都会触发父容器的事件，通过判断点击目标是否为.checkicon来处理逻辑，彻底避免重复绑定问题。

修改后的代码 #

// Add Todo Items
addTodoButton.addEventListener("click", () => {
    let newTodoItem = {
        "id": localStorage.getItem("systemID"),
        "value": addTodoInput.value,
        "checked": "false",
        "date": getDate()
    }
    let addHTML = normalTodoItem(newTodoItem["id"], newTodoItem["value"], newTodoItem["checked"], newTodoItem["date"])
    todoItemList.insertAdjacentHTML("beforeend", addHTML);
    let getData = JSON.parse(localStorage.getItem("todoItems"))
    getData.push(newTodoItem)
    let newData = JSON.stringify(getData)
    localStorage.setItem("todoItems", newData)
    addTodoInput.value = ""
    addTodoButton.disabled = true
    localStorage.setItem("systemID", Number(localStorage.getItem("systemID")) + 1)
})

// 使用事件委托处理勾选按钮逻辑
todoItemList.addEventListener('click', (e) => {
    // 判断点击的目标是否是.checkicon元素
    const item = e.target.closest('.checkicon');
    if (!item) return;

    // 切换图标类名
    if (item.classList.contains("fa-square-o")) {
        item.classList.replace("fa-square-o", "fa-check-square-o");
    } else if (item.classList.contains("fa-check-square-o")) {
        item.classList.replace("fa-check-square-o", "fa-square-o");
    }

    // 更新localStorage中的状态
    const clickSection = item.closest('section');
    const getID = clickSection.dataset.id;
    let getData = JSON.parse(localStorage.getItem("todoItems"));
    const output = getData.find(output => output.id == getID);
    if (output) {
        output.checked = output.checked === "false" ? "true" : "false";
        localStorage.setItem("todoItems", JSON.stringify(getData));
    }
})

额外优化点 #

• 用classList.contains()和classList.replace()替代字符串操作，避免类名重叠导致的错误，逻辑更可靠。
• 用三元表达式简化状态切换逻辑，代码更简洁。
• 移除重复的事件绑定逻辑，减少不必要的DOM操作和内存占用。

内容的提问来源于stack exchange，提问作者Arda B.