jQuery实现明暗模式切换按钮修改class后无法二次触发点击事件问题

• 初始版本事件绑定失效：jQuery 直接选择器绑定的on("click")事件仅作用于页面加载时已存在的对应元素，初始状态下不存在带.lightmode类的元素，因此该事件从未成功绑定到目标按钮上，后续动态添加.lightmode类也不会触发对应回调。
• 委托版本需点击两次：你同时绑定了两个全局委托事件，且toggleClass使用逻辑冲突，切换按钮类名时会同时触发两次事件判断，导致样式修改分两次执行。

不用拆分两个事件监听，直接给按钮绑定单一事件，通过判断当前按钮状态切换对应样式即可，代码如下：

$(() => {
  // 绑定按钮点击事件，不需要拆分darkmode/lightmode两个监听
  $(document).on("click", ".btn.darkmode, .btn.lightmode", function() {
    const $toggleBtn = $(this);
    // 切换全局文本、背景的明暗样式
    $("body, p, h2").toggleClass("darkmode");
    // 切换badge组件的明暗样式
    $(".badge").toggleClass("badge-dark badge-light");
    // 切换按钮自身的样式和显示文本
    $toggleBtn.toggleClass("btn-dark btn-light darkmode lightmode")
    .text($toggleBtn.text() === "Dark mode" ? "Light mode" : "Dark mode");
  })
})

原有HTML不需要修改，直接使用你提供的原有按钮代码即可：

<button class="btn btn-dark darkmode mr-1">Dark mode</button>

调整后一次点击就能完成所有状态同步切换，不会出现点击无效或者需要点击两次的问题。

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