为何无法在待办事项列表中切换元素的CSS类？

看起来你遇到的问题大概率是DOM加载顺序或者脚本执行时机的问题，我来帮你一步步排查和解决：

可能的原因分析 #

你把自定义的jQuery代码放在了bootstrap.min.js的底部，这里有两个常见坑：

• jQuery可能还未加载完成：Bootstrap依赖jQuery，但如果你的jQuery脚本是在bootstrap.min.js之后引入的，那你的代码执行时jQuery还没被初始化，自然无法生效。
• DOM元素还未渲染就绑定事件：如果你的脚本执行时，页面中的<ul id="myUL">和里面的<li>还没被浏览器渲染出来，那$( "#myUL" ).children()找不到元素，事件绑定就会失败。

具体解决方案 #

方案1：确保脚本执行时机正确（优先推荐） #

把你的自定义代码包裹在DOM就绪的回调函数里，这样能保证代码在所有DOM元素渲染完成后再执行，同时改用事件委托的方式，还能支持后续动态添加的待办任务：

$(document).ready(function() {
  $("#myUL").on("click", "li", function() {
    // 合并toggleClass调用，让代码更简洁
    $(this).toggleClass("checked border-primary border-success");
  });
});

方案2：调整脚本引入顺序 #

不要把自定义代码塞进bootstrap.min.js内部，单独维护一个自定义脚本文件，并且严格按照以下顺序引入：

<!-- 1. 先引入jQuery -->
<script src="jquery.min.js"></script>
<!-- 2. 再引入Bootstrap -->
<script src="bootstrap.min.js"></script>
<!-- 3. 最后引入你的自定义脚本 -->
<script src="your-todo-script.js"></script>

这样修改后，点击<li>元素时就能正确切换指定的类了，后续新增的待办任务也能触发点击事件哦～

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