jQuery中<dt>元素绑定的事件无法触发问题排查

DevOps 小满

2026-5-29

问题根源与修复方案

核心问题：jQuery 3.x 已移除`on('hover')`事件绑定支持

你遇到的问题本质是jQuery 3.x 不再允许将hover作为事件名称传递给on()方法。在旧版jQuery中，hover是mouseenter和mouseleave两个事件的快捷别名，但从jQuery 1.7开始官方就不推荐这种写法，到jQuery 3.x则彻底移除了该支持——这直接导致你绑定的<dt>悬停事件完全无法触发，看起来就像两个事件都失效了（实际上你的click事件绑定写法是正确的，只是被悬停事件的问题掩盖了）。

而hover()快捷方法依然能正常工作，是因为它内部本质是分别绑定了mouseenter和mouseleave事件，并没有依赖hover这个事件名。

修复代码

只需要把<dt>的悬停事件绑定写法替换为明确的mouseenter和mouseleave事件即可，有两种方式：

方式1：合并处理两个事件

showHideDefLists.on('mouseenter mouseleave', 'dt', function (e) {
  var dt = $(this);
  if( $.isNumeric(dt.data('time')) ) {
    // 根据事件类型切换样式类
    if (e.type === 'mouseenter') {
      dt.addClass('hover');
      dt.next('dd').addClass('hover');
    } else {
      dt.removeClass('hover');
      dt.next('dd').removeClass('hover');
    }
  }
});

方式2：分开绑定事件处理函数

// 鼠标进入时添加样式
showHideDefLists.on('mouseenter', 'dt', function () {
  var dt = $(this);
  if( $.isNumeric(dt.data('time')) ) {
    dt.addClass('hover');
    dt.next('dd').addClass('hover');
  }
})
// 鼠标离开时移除样式
.on('mouseleave', 'dt', function () {
  var dt = $(this);
  if( $.isNumeric(dt.data('time')) ) {
    dt.removeClass('hover');
    dt.next('dd').removeClass('hover');
  }
});