如何让 popcorn.js 处理动态加载的内容？答案

【问题标题】：How to get popcorn.js working on dynamically loaded content?如何让 popcorn.js 处理动态加载的内容？
【发布时间】：2013-12-14 16:18:26
【问题描述】：

我已经学习了这个教程：

http://popcornjs.org/popcorn-101

教程代码

<!doctype html>
<html>
  <head>
    <script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
    <script>
      // ensure the web page (DOM) has loaded
      document.addEventListener("DOMContentLoaded", function () {

     // Create a popcorn instance by calling Popcorn("#id-of-my-video")
     var pop = Popcorn("#ourvideo");

     // add a footnote at 2 seconds, and remove it at 6 seconds
     pop.footnote({
       start: 2,
       end: 6,
       text: "Pop!",
       target: "footnotediv"
     });

     // play the video right away
     pop.play();

      }, false);
    </script>
  </head>
  <body>
    <video height="180" width="300" id="ourvideo" controls>
      <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4">
      <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv">
      <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm">
    </video>
    <div id="footnotediv"></div>
  </body>
</html>

并且可以在本地运行。

在 Firebug 中，我看到 footnote div 更新来自：

<div style="display: none;">Pop!</div>

到：

<div style="display: inline;">Pop!</div>

然而，在一个实时站点上，我正在通过 Ajax 从 MongoDB 数据库加载我的页面 html，并且脚注显示功能似乎无法正常工作。

考虑到这可能与加载内容后需要“重新初始化”有关，我已将 popcorn.js 功能添加到单击时调用的函数中：

功能

<script>
function myPopcornFunction() {
var pop = Popcorn("#ourvideo");
pop.footnote({
start: 2,
end: 6,
text: "Pop!",
target: "footnotediv"
});
pop.play();
}
</script>

打电话

$(document).on("click","a.video", function (e) {
// passing values to python script and returning results from database via getJSON()
myPopcornFunction();
});

这似乎没有效果。

视频播放时未加载footnotediv 内容。

视频也没有自动播放。

在 jsFiddle 中很难用动态内容重现，那么有没有一种通用的方法来确保爆米花与动态加载的内容一起工作？

点击时出现 Firebug 错误

TypeError: k.media.addEventListener is not a function

【问题讨论】：

标签： mongodb jquery popcornjs

【解决方案1】：

这似乎是一个时间问题，因为最初我调用了加载内容的函数（getJSON() 函数）的 myPopcornFunction() outside。当我将调用与getJSON() 函数放在同一个块中时，事情似乎保持了它们的“顺序”并且爆米花可以正常工作。

之前

$(document).on("click","a.video", function (e) {
$.getJSON("/path", {cid: my_variable, format: 'json'}, function(results){
$("#content_area").html("");
$("#content_area").append(results.content);
});
e.preventDefault();
myPopcornFunction();   // the call WAS here
});

之后

$(document).on("click","a.video", function (e) {
$.getJSON("/path", {cid: my_variable, format: 'json'}, function(results){
$("#content_area").html("");
$("#content_area").append(results.content);
myPopcornFunction();   // the call is now HERE
});
e.preventDefault();
});

myPopcornFunction() 与原始帖子中的相同。

【讨论】：