如何触发Ajax添加的hover事件监听器，解决用户持续悬停无响应问题

方法1：基于jQuery :hover伪类检测（最简实现） #

核心逻辑是在Ajax请求完成、绑定hover事件后，立刻检测当前链接是否处于悬停状态，若为真则手动触发mouseenter事件即可触发弹窗逻辑。

$('a.target-link').on('click', function () {
  const $target = $(this);
  $.ajax({
    // 你的原有Ajax配置项
    url: 'your-request-url',
    method: 'GET',
    success: function (response) {
      // 先移除旧的hover监听，避免重复绑定
      $target.off('mouseenter mouseleave');
      // 绑定新的悬停弹窗逻辑
      $target.hover(
        function () {
          // 你的弹窗展示逻辑
          showPopup(response);
        },
        function () {
          // 你的弹窗隐藏逻辑
          hidePopup();
        }
      );

      // 检测当前是否仍悬停在链接上，是则主动触发mouseenter
      if ($target.is(':hover')) {
        $target.trigger('mouseenter');
      }
    }
  });
});

该方案依赖jQuery对:hover伪类的支持，兼容jQuery 1.9+及所有主流浏览器。

方法2：预存悬停状态（兼容性最优） #

如果你的运行环境对:hover选择器支持不佳，可以提前给目标链接绑定状态监听器，提前记录悬停状态，完全不依赖选择器判断：

// 页面初始化时给所有目标链接绑定状态记录逻辑
$('a.target-link').each(function () {
  const $link = $(this);
  $link.data('isHovering', false);
  $link
    .on('mouseenter', () => $link.data('isHovering', true))
    .on('mouseleave', () => $link.data('isHovering', false));
});

// 点击请求逻辑
$('a.target-link').on('click', function () {
  const $target = $(this);
  $.ajax({
    // 你的原有Ajax配置项
    success: function (response) {
      $target.off('mouseenter mouseleave');
      $target.hover(
        () => showPopup(response),
        () => hidePopup()
      );
      // 直接读取预存的悬停状态判断
      if ($target.data('isHovering')) {
        $target.trigger('mouseenter');
      }
    }
  });
});

额外注意事项 #

• 每次绑定hover事件前先调用off('mouseenter mouseleave')移除旧监听，避免多次点击请求后事件重复触发，导致弹窗多次执行异常。
• 确保trigger操作在所有弹窗依赖的动态数据加载完成后执行，避免出现数据未定义的报错。

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