Javascript/Jquery 委托点击触发视频功能两次

Question

我正在构建一个基于 gfycat 的 api 加载 html5 视频的网站（去 gfy！）。有一个错误，当某些视频无法在 clikc 上播放时。实际上他们确实在播放，但点击事件发生了两次，并导致视频暂停。视频将永远不会再播放。网站在这里

由于视频是在页面之后加载的，因此我使用委托来添加点击事件。处理点击播放/暂停的代码：

jQuery(document).delegate('video.gfyVid', 'DOMNodeInserted', function () {
    $('video').on('click', videoPlay);
    $("[data-toggle='tooltip']").tooltip();
});

function videoPlay(){
    if(this.paused){
        this.play();        
    }else{
        this.pause();
    }
}

Answer 1

如果您有多个视频，并且 DOMNodeInserted 事件按预期触发，则会将多个处理程序绑定到同一视频。如果您有偶数个处理程序，您将从play()开始，最终以 pause() 结束，给人一种什么都没有发生的外观。

与其侦听DOMNodeInserted事件，不如委托click事件呢？

$(document).on('click', 'video.gfyVid', function() {
    if(this.paused){
        this.play();        
    }else{
        this.pause();
    }
}