jQuery hover在自动补全动态加载数据时失效，硬编码HTML却正常？

嘿，这个坑我之前踩过！问题出在事件绑定的方式上——你直接用.hover()绑定事件时，只会对页面初始加载时已经存在的DOM元素生效（也就是你硬编码的那些<li>），而自动补全动态加载的选项是在绑定事件之后才被添加到页面中的，自然没被挂上监听。

为什么硬编码的能正常工作？ #

当页面加载完成后，硬编码的<li>已经存在于DOM树里了，此时调用.hover()可以直接找到这些元素并绑定事件。但动态生成的元素是后续通过AJAX或其他方式追加的，它们在你执行绑定代码的时候还不存在，所以事件根本没绑定到它们身上。

正确的解决方法：事件委托 #

jQuery的事件委托机制可以完美解决这个问题——把事件绑定到一个页面加载时就存在的父元素上，利用事件冒泡的特性，让父元素来监听子元素的事件，哪怕子元素是后来动态生成的也没问题。

举个例子，假设你的自动补全结果是放在一个类名为autocomplete-wrapper的容器里（这个容器初始就存在于页面），你可以这样写：

// 用.on()绑定mouseenter和mouseleave（hover是这两个事件的简写）
$('.autocomplete-wrapper').on({
  mouseenter: function() {
    // 获取当前hover的li的索引
    const hoveredIndex = $(this).index();
    console.log('Hovered li index:', hoveredIndex);
  },
  mouseleave: function() {
    // 如果需要在鼠标离开时执行逻辑，写在这里
    console.log('Mouse left li');
  }
}, 'li');

如果你的自动补全插件有特定的父容器（比如jQuery UI Autocomplete的.ui-autocomplete），就把父选择器换成那个容器，这样更精准，性能也更好。

关键要点： #

• 父元素必须是页面初始化时就存在的，不能是动态生成的
• 尽量选择最接近目标元素的父容器，避免用document或body（减少事件冒泡的层级，提升性能）
• .hover()本质是mouseenter和mouseleave的语法糖，用事件委托时需要明确这两个事件

这样改完之后，不管是硬编码还是动态加载的<li>，鼠标悬停时都能正常触发事件并返回索引啦！

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