动态.load（）ed元素不可查询

Question

我有一个主html文件和一些存储在外部html文件中的 iframe 元素，这些元素仅在用户点击其中一个导航按钮后按需加载。

$('#carousel_01').load('content_01.html');

每个 iframe的 * src *属性都指向Vimeo视频。 对于每个Vimeo视频，我附加了一个事件监听器功能，它监视视频的状态并触发主html文档中的某个动作（主要是div动画）。

问题是：将外部iframe加载到主html文件后，它不会被注册为文档本身的一部分。 如果我使用

查询主html文档中的所有iframe

var vimeoPlayers = document.querySelectorAll('iframe'), player;

仅返回之前加载的iframe。动态加载的那些不在列表中（同时仍在主页面上显示和显示）。 无法查询加载的iframe，我无法将事件侦听器附加到视频。 如何强制更新主html文档以便识别导入（加载）的iframe？

Answer 1

由于AJAX是异步的，您需要更新回调函数中的变量：

$('#carousel_01').load('content_01.html', function() {
    vimeoPlayers = document.querySelectorAll('iframe');
});