jQuery中document委托hover事件失效，附代码求助

问题描述 #

我有两个按钮和两个列表，以下是我的代码：

$(document).on('hover','.select-user-type-js',function(){ 
  if($(this).hasClass('select-user-type_customer')){
    $('#buyer').show(); 
    $('#seller').hide(); 
    $($this).addClass('active'); 
    $('.select-user-type_performer').removeClass('active'); 
  } else{
    $('#buyer').hide(); 
    $('#seller').show(); 
    $($this).addClass('active'); 
    $('.select-user-type_customer').removeClass('active'); 
  } 
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

目前遇到的问题是使用jQuery通过document委托绑定hover事件无法正常工作，请求技术帮助。

解决方案 #

嘿，我来帮你搞定这个问题！你的代码里有两个核心问题导致hover委托失效，咱们一步步修复：

1. hover事件不能直接用于事件委托

jQuery的hover其实是mouseenter和mouseleave两个事件的简写语法，但事件委托机制不支持直接用hover作为事件名，得分别绑定这两个基础事件，或者根据需求单独使用mouseenter/mouseleave。

2. 未定义的$this变量

你代码里用了$($this)，但$this压根没被声明，应该改成$(this)，或者先把当前元素存为变量：const $this = $(this);，不然会直接报错导致逻辑完全跑不起来。

修复后的完整代码 #

// 用mouseenter替代hover做事件委托，如需离开逻辑可补充mouseleave
$(document)
  .on('mouseenter', '.select-user-type-js', function() {
    const $this = $(this); // 存下当前元素避免重复DOM查询
    if ($this.hasClass('select-user-type_customer')) {
      $('#buyer').show();
      $('#seller').hide();
      $this.addClass('active');
      $('.select-user-type_performer').removeClass('active');
    } else {
      $('#buyer').hide();
      $('#seller').show();
      $this.addClass('active');
      $('.select-user-type_customer').removeClass('active');
    }
  })
  // 可选：如果需要鼠标离开时恢复状态，添加mouseleave事件
  .on('mouseleave', '.select-user-type-js', function() {
    // 示例：离开时移除所有active类
    // $('.select-user-type-js').removeClass('active');
    // 或者根据需求调整显示逻辑
  });

额外小提示 #

• 尽量别用document作为委托的根元素，找离目标元素最近的静态父节点绑定，能提升事件触发的性能。
• 如果只需要鼠标进入时的切换效果，只绑定mouseenter就够了；如果需要离开时恢复初始状态，再补充mouseleave的处理逻辑。

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