加载动态内容时，Html5 视频播放停止工作答案

【问题标题】：Html5 Video Play on Hover Stops Working When Dynamic Content is Loaded加载动态内容时，Html5 视频播放停止工作
【发布时间】：2021-09-23 02:05:50
【问题描述】：

我有一个带有视频产品的 WordPress 网站，此代码添加了一个功能，以便当鼠标悬停在视频缩略图上时它开始播放，当鼠标离开视频时它暂停。它在初始页面加载时工作得很好，但通过 ajax 加载的其他内容不起作用。

我是 Javascript 新手，但我明白为什么当通过 ajax 加载其他内容时我的代码停止工作。我只是不知道如何使它工作。 :) 我已经搜索了答案并遇到了一些关于使用“开启”状态的信息，但不知道如何在我的代码中使用它。

$(document).ready(function() {
    var figure = $(".video").hover( hoverVideo, hideVideo );

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

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

我知道它不起作用，因为新内容尚未“准备好”，或者由于页面未加载，脚本不知道新内容。那么......我如何使用动态内容进行这项工作？提前致谢！

【问题讨论】：

标签： javascript ajax wordpress hover html5-video

【解决方案1】：

我想通了。

$(document).on({
    mouseenter: function () {
        $('video', this).get(0).play();
    },
    mouseleave: function () {
        $('video', this).get(0).pause();
    }
}, '.video');

使用 $(document).on 而不是 $(document).ready 允许它适用于任何以前或将来加载的要修改的“.video”类.

使用 mouseenter 和 mouseleave 事件代替 .hover

【讨论】：