使用jQuery为同一元素（带/不带.fixed类）绑定不同点击事件可行吗？

嗨，你的这个写法其实没办法达到预期效果，核心问题出在jQuery事件绑定的时机上：

当页面刚加载完成时，你的.menu元素还没有被加上.fixed类，所以$('.fixed .menu')这个选择器根本匹配不到任何DOM元素，对应的点击事件自然也没绑定到任何节点上。等你滚动页面给元素加上.fixed类之后，这个绑定动作不会自动重新执行，所以新加类后的点击事件依然不会触发。

靠谱的解决方案有这几种： #

1. 单个点击事件里判断类名（最直观） #

直接给.menu绑定一个点击事件，点击时检查它有没有.fixed类，再执行对应的逻辑：

$('.menu').click(function() {
  const $this = $(this);
  if ($this.hasClass('fixed')) {
    // 滚动后需要执行的动作
    console.log('我是加了fixed后的点击动作');
  } else {
    // 初始状态的点击动作
    console.log('我是初始状态的点击动作');
  }
});

2. 事件委托（推荐，适配动态变化的元素） #

利用事件冒泡机制，把事件绑定到父元素或者document上，这样不管元素后来有没有添加/移除类，都能正确触发对应的逻辑：

// 初始状态的点击处理
$(document).on('click', '.menu:not(.fixed)', function() {
  console.log('初始状态点击');
});

// 加了fixed类后的点击处理
$(document).on('click', '.menu.fixed', function() {
  console.log('fixed状态点击');
});

这种方式的好处是，哪怕你后续动态修改元素的类名，事件依然能正确匹配触发，不需要重新绑定事件。

3. 动态绑定事件（不推荐，容易踩坑） #

如果你一定要分开绑定事件，可以在添加/移除.fixed类的时候，重新绑定对应的点击事件，但要注意先解绑之前的事件，避免重复触发：

// 初始绑定
function initialMenuClick() {
  console.log('初始状态点击');
}
$('.menu').click(initialMenuClick);

// 滚动监听
$(window).scroll(function() {
  const $menu = $('.menu');
  const shouldBeFixed = /* 这里写你判断是否要加fixed的条件，比如滚动距离大于某个值 */;

  if (shouldBeFixed) {
    $menu.addClass('fixed')
         .off('click', initialMenuClick)
         .click(function() {
           console.log('fixed状态点击');
         });
  } else {
    $menu.removeClass('fixed')
         .off('click')
         .click(initialMenuClick);
  }
});

⚠️ 注意：这种方式容易出现重复绑定的问题，而且如果元素上还有其他点击事件，off('click')会把所有点击事件都移除，所以最好给事件加命名空间（比如.click('menu.initial', initialMenuClick)），解绑时精准移除对应事件。

总结 #

优先选择前两种方案，代码更简洁，也不容易出现意外问题。事件委托尤其适合处理动态变化的元素场景，而单个事件内判断类名的方式则更直观易懂。

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