最初不存在元素时未触发事件[重复]

Posted 2023-02-25

【中文标题】最初不存在元素时未触发事件[重复]

【英文标题】：Events not firing when element does not exist initially [duplicate]

【发布时间】：2014-08-13 19:37:14

【问题描述】：

我正在使用 jQuerys .on() 将事件处理程序绑定到视频元素。一切都很好：http://jsfiddle.net/me2loveit2/r0zt4qLg/3/

$('#testid').on('pause play ended', function (e) 
    $('body').append('<br>Event triggered: ' + e.type);
);

但如果视频最初不存在，则事件不会触发：http://jsfiddle.net/me2loveit2/r0zt4qLg/5/

这是有道理的，因为根据 .on() 上的 jQuery 文档：http://api.jquery.com/on/ 它指出：

事件处理程序仅绑定到当前选定的元素；他们 在您的代码调用 .on() 时必须存在于页面上。

接着说使用委托事件，

但在我的示例中（http://jsfiddle.net/me2loveit2/r0zt4qLg/5/），父元素永远不会触发这些事件，因为它们不适用于那里。 有没有办法使这项工作，或者是元素存在后附加事件处理程序的唯一解决方案？

【问题讨论】：

问题是来自 html5 媒体元素的事件不会冒泡。

我无法使用“重复问题”的解决方案：jsfiddle.net/me2loveit2/r0zt4qLg/8

【参考方案1】：

您已像这样委派事件：

$(document).on('pause play ended','#testid', function (e) 
    $('body').append('<br>Event triggered: ' + e.type);
);

【讨论】：

这不能解决问题。

如果你看我的第二个例子，它是正确委派的，但就像 Pointy 说的那样，这并不能解决问题。