jQuery hover/mouseenter函数失效排查：动态生成元素是否为诱因？

嘿，你补充的点太关键了——这些链接是动态生成的，这大概率就是问题的核心！我来帮你逐个分析你写的代码问题，再给你正确的解决办法：

先说说核心原因 #

普通的jQuery事件绑定（比如直接$(".thumb-link").on(...)）只能作用于页面加载完成时就已经存在的DOM元素。如果你的.thumb-link是从数据库动态拉取、后来才插入页面的，这些元素根本没被绑定到事件，自然触发不了。

逐个看你写的代码哪里错了 #

1. 第一种写法：

$(".thumb-link").on({ mouseenter: function() { alert("yay"); }, mouseleave: function() { alert("boo"); } });

这个写法本身是对的，但只对页面初始化时就存在的.thumb-link有效，动态生成的元素吃不到这个绑定。

2. 第二种写法：

$(document).on('mouse-enter', '.thumb-link', function(e) { alert("yay"); });

这里踩了个拼写坑！jQuery里的事件名是mouseenter，不是mouse-enter，多了个横杠，浏览器根本识别不了这个事件，肯定没反应。

3. 第三种写法：

$(document).on('hover', '.thumb-link', function(e) { alert("yay"); });

hover其实不是原生DOM事件，它是jQuery封装的语法糖，等价于同时绑定mouseenter和mouseleave。但用事件委托（就是你这种给document绑定的方式）时，不能直接用hover当事件名，必须分开用真实的事件名。

正确的解决办法 #

方法一：事件委托（最推荐，适配动态元素） #

找一个页面加载时就存在的父元素（尽量不要用document，离目标元素越近性能越好，比如.thumb-container这种静态容器），然后用事件委托绑定正确的事件：

写法一：分开绑定

$('.static-parent').on('mouseenter', '.thumb-link', function() {
    alert("yay");
}).on('mouseleave', '.thumb-link', function() {
    alert("boo");
});

写法二：对象形式一次性绑定

$('.static-parent').on({
    mouseenter: function() {
        alert("yay");
    },
    mouseleave: function() {
        alert("boo");
    }
}, '.thumb-link');

方法二：动态生成后手动绑定（不推荐，容易遗漏） #

如果你是通过AJAX或者其他方式动态生成元素，可以在元素插入页面后，重新给它们绑定事件：

// 假设这是AJAX加载数据后的回调函数
$.ajax({
    url: '/your-data-api',
    success: function(data) {
        // 把动态生成的链接插入页面
        $('.parent-container').append(data);
        // 给新插入的元素绑定事件
        $(".thumb-link").on({
            mouseenter: function() { alert("yay"); },
            mouseleave: function() { alert("boo"); }
        });
    }
});

这种方法的问题是，每次动态添加元素都要重新绑定，容易漏绑，不如事件委托省心。

总结一下你的失效原因 #

1. 动态生成的元素无法被页面初始化时的普通绑定捕获
2. 第二种写法事件名拼写错误（mouse-enter → mouseenter）
3. 第三种写法错误地在事件委托中使用了hover语法糖

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