Jquery 用于动态创建视频标签的动态结束函数

我有一个创建视频标签的按钮：

$("#btn").click(function() {
  var video = $('<video />', {
    id: 'myVid',
    src: "vid1.mp4",
    type: 'video/mp4',
    controls: false
  });
  $('body').append(video);
  var btn = $('<button id="btnPP">Play Video</button>');
  $('body').append(btn);
});
$(document).on('ended', "#myVid", function() {
  alert("fini");
});

$（“#btn”）。单击（函数（）{
var视频=$（''{
id:'我的视频'，
src:“vid1.mp4”，
键入：“视频/mp4”，
控件：false
});
$（'body'）。追加（视频）；
var btn=$（“播放视频”）；
$（'body'）。追加（btn）；
});
$（文档）.on（'end'），“#myVid”，function（）{
警报（“fini”）；
});

---

代码对我来说似乎还可以，但是当视频结束时，它不会在

结束的

函数中执行任何代码。

问题是视频在页面上不存在，即使在

.ready（）

上也是如此。因此，即使使用冒泡，您也无法使用

$（document）.on（）

将其作为目标。相反，您需要添加一个。在下面的示例中，我向

end

事件添加了一个事件侦听器，并确保目标是视频。我还添加了一个

自动播放

，显示视频一旦结束将触发事件：

$（“#btn”）。单击（函数（）{
var视频=$（''{
id:'我的视频'，
src:“https://www.w3schools.com/html/mov_bbb.mp4",
键入：“视频/mp4”，
控件：false，
自动播放：对
});
$（'body'）。追加（视频）；
var btn=$（“播放视频”）；
$（'body'）。追加（btn）；
});
文档.添加的事件列表器（'ended'，函数（e）{
if（$（e.target）.is（'video'））{
警报（“fini”）；
}
}，对）

测试