jQuery on click事件仅生效一次问题：按钮重置功能如何稳定运行？

算力阿峰

2026-9-29

问题根源

你代码中toggleClick(false)调用的$('.button').off('click')会移除按钮上绑定的全部点击事件，包括你单独绑定的重置逻辑的点击事件，所以第一次执行完后，按钮上没有任何事件残留，后续点击自然无响应。

修正方案

给需要动态解绑的功能事件添加事件命名空间，解绑时只移除指定命名空间下的事件，不会影响其他绑定的事件，同时增加避免重复绑定的逻辑。

完整可运行代码

jQuery(document).ready(function($) {
  function toggleClick(on) {
    if (on) {
      // 先解绑避免重复绑定，仅移除命名空间为mainFunc的点击事件
      $('.button').off('click.mainFunc').on('click.mainFunc', function() {
        setTimeout(function() {
          $('.sidebaropen')[0].click()
        }, 210);
        $("html, body").animate({
          scrollTop: 0
        }, "fast");
        toggleClick(false);
        console.log('clicked');
      });

    } else {
      // 仅解绑主功能的点击事件，保留重置事件
      $('.button').off('click.mainFunc');
    }

  }
  toggleClick(true);

  // 这个重置事件一直保留，不会被上面的off清除
  $('.button').on('click', function() {
    console.log('Reset done');
    setTimeout(function() {
      toggleClick(true);
    }, 210);
  });
});