使用JavaScript为待办事项添加checked类时事件绑定异常问题

问题根源：你当前的代码只在执行时给已存在的DOM元素绑定了事件，后续动态创建的待办项里的Checkbox，在绑定代码执行时还没生成，所以没被挂上监听器。

直接有效的解决方案是用事件委托，把事件绑定到一个始终存在的父容器上，利用事件冒泡处理动态元素：

export default function (){
    // 找一个包裹所有待办项的父容器（根据你的项目结构调整选择器，比如.todo-list之类的）
    const todoContainer = document.querySelector('.todo-container');
    if(!todoContainer) return;

    todoContainer.addEventListener('click', (e) => {
        // 判断点击的目标是不是checkbox元素
        if(e.target.classList.contains('checkbox')){
            e.target.classList.toggle('checked');
        }
    });
}

为什么这能解决问题？ #

• 父容器是页面加载时就存在的DOM元素，所以事件监听器能成功绑定
• 后续新增的Checkbox点击时，事件会冒泡到父容器，父容器通过e.target判断点击源，再执行toggle类的逻辑，不管什么时候新增的元素都能触发

内容的提问来源于stack exchange，提问作者Joyal Jijo