动态Div点击事件失效：Todo项点击无法添加删除线

嘿，我来帮你排查这个小问题！这种Todo点击后没出现删除线的情况，通常是CSS定义、事件绑定或者元素嵌套这几个环节出了小疏漏，咱们一步步来捋：

1. 先检查你的CSS类是否正确定义 #

首先得确保你已经写了带删除线的样式类，比如：

/* 定义完成状态的样式 */
.completed {
  text-decoration: line-through;
  color: #888; /* 可选，给完成的项加个灰色更清晰 */
}

另外要注意样式优先级，如果你的Todo项本身有其他样式（比如.todo-item的text-decoration被设为none），可能需要用更具体的选择器来覆盖，比如：

.todo-item.completed {
  text-decoration: line-through;
}

2. 确认JavaScript事件绑定是否适配动态元素 #

如果你的Todo项是通过输入框动态添加的（不是页面加载时就存在的），直接给单个Todo项绑定点击事件是无效的——新添加的元素不会继承之前的事件绑定。这时候要用事件委托，把事件绑定到父容器上：

// 假设你的Todo列表父容器是<ul class="todo-list"></ul>
document.querySelector('.todo-list').addEventListener('click', function(e) {
  // 找到被点击的Todo项，避免点击子元素时找不到目标
  const todoItem = e.target.closest('.todo-item');
  if (todoItem) {
    // 切换completed类，点击一次加删除线，再点一次取消
    todoItem.classList.toggle('completed');
  }
});

3. 排查是否有其他代码干扰 #

比如有没有JS代码不小心移除了completed类，或者CSS里有其他规则覆盖了text-decoration属性。你可以打开浏览器的开发者工具（F12），点击Todo项后查看元素的样式面板，看看.completed类是否被正确应用，有没有被划掉（表示被其他样式覆盖）。

按照这几步排查下来，应该就能解决删除线不显示的问题啦！

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