HTML5 Video悬停播放功能在AJAX加载动态内容后失效如何修复？

你原有代码失效的核心原因是$(".video").hover()只会给页面初次加载时已经存在的.video元素绑定事件，AJAX新增的同类元素不会被自动绑定，改用jQuery事件委托机制即可解决。

修改后完整代码 #

$(document).ready(function() {
    // 事件委托绑定到静态父节点，支持动态新增的.video元素
    $(document).on('mouseenter', '.video', hoverVideo);
    $(document).on('mouseleave', '.video', hideVideo);

    function hoverVideo(e) {  
        $('video', this).get(0).play(); 
    }

    function hideVideo(e) {
        $('video', this).get(0).pause(); 
    }
});

说明 #

• jQuery的.hover()方法是mouseenter+mouseleave事件的语法糖，事件委托需要拆分两个事件单独绑定
• 代码中把事件监听器绑定到不会被动态替换的document节点，你也可以替换为页面中包裹所有视频内容的最近静态父容器（比如你用来插入AJAX返回内容的容器，假设类名为.video-container，就把$(document)换成$('.video-container')），可以提升事件触发性能

内容的提问来源于stack exchange，提问作者Austin Parrish Thomas