音频事件不会在播放事件上触发 jQuery

Posted 2023-02-25

【中文标题】音频事件不会在播放事件上触发 jQuery

【英文标题】：Audio event does not trigger jQuery on play event

【发布时间】：2015-11-08 13:47:39

【问题描述】：

我尝试在音频play 事件上执行一个函数：

jQuery('audio').on('play', function ()  /* ... */ );

但是我的元素在这个函数执行时不存在，所以它没有被选中。相反，当我需要为动态添加的内容触发事件时，我习惯使用不同的语法：

jQuery('.constant-container').on('play', 'audio', function () 
    /* ... */ 
);

.constant-container 不变的地方。 但是这个解决方案似乎不起作用，音频元素也没有得到任何click 事件。

这是link to the bin。

前 4 个音频正确处理事件，但不是最后 4 个。

【参考方案1】：

显然媒体事件（那些专门属于 audio 或 video 的事件，如 play、pause、timeupdate 等）不会冒泡。您可以在this question 的答案中找到对此的解释。

所以使用他们的解决方案，我捕获了play 事件，

jQuery.createEventCapturing(['play']);  
jQuery('body').on('play', 'audio', function()... // now this would work.

JS Bin demo

事件捕获代码（取自另一个 SO 答案）：

    jQuery.createEventCapturing = (function () 
        var special = jQuery.event.special;
        return function (names) 
            if (!document.addEventListener) 
                return;
            
            if (typeof names == 'string') 
                names = [names];
            
            jQuery.each(names, function (i, name) 
                var handler = function (e) 
                    e = jQuery.event.fix(e);

                    return jQuery.event.dispatch.call(this, e);
                ;
                special[name] = special[name] || ;
                if (special[name].setup || special[name].teardown) 
                    return;
                
                jQuery.extend(special[name], 
                    setup: function () 
                        this.addEventListener(name, handler, true);
                    ,
                    teardown: function () 
                        this.removeEventListener(name, handler, true);
                    
                );
            );
        ;
    )();