title: How to get popcorn.js working on dynamically loaded content?
body: <p>I've followed this tutorial:</p>
  
  <p><a href="http://popcornjs.org/popcorn-101" rel="nofollow">http://popcornjs.org/popcorn-101</a></p>
  
  <p><em>Tutorial Code</em></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        // 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);
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;video height="180" width="300" id="ourvideo" controls&gt;
        &lt;source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"&gt;
        &lt;source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"&gt;
        &lt;source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"&gt;
      &lt;/video&gt;
      &lt;div id="footnotediv"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And can run this locally.  </p>
  
  <p>In Firebug, I see the <code>footnote</code> div update from:</p>
  
  <p><code>&lt;div style="display: none;"&gt;Pop!&lt;/div&gt;</code></p>
  
  <p>to:</p>
  
  <p><code>&lt;div style="display: inline;"&gt;Pop!&lt;/div&gt;</code></p>
  
  <p>On a live site however, I am loading my page html from a MongoDB database via Ajax and the footnote display functionality doesn't seem to be working.  </p>
  
  <p>Thinking this might have something to do with needing to 're-initialise' after the content has loaded, I've added the popcorn.js functionality to a function called on click:</p>
  
  <p><em>Function</em></p>
  
  <pre><code>&lt;script&gt;
  function myPopcornFunction() {
  var pop = Popcorn("#ourvideo");
  pop.footnote({
  start: 2,
  end: 6,
  text: "Pop!",
  target: "footnotediv"
  });
  pop.play();
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><em>Call</em></p>
  
  <pre><code>$(document).on("click","a.video", function (e) {
  // passing values to python script and returning results from database via getJSON()
  myPopcornFunction();
  });
  </code></pre>
  
  <p>This doesn't seem to have an effect.  </p>
  
  <p>No <code>footnotediv</code> content is loaded when the video plays.</p>
  
  <p>The video is also not playing automatically.  </p>
  
  <p>It's hard to reproduce in jsFiddle with dynamic content, so is there a generic approach to ensuring popcorn works with dynamically loaded content?  </p>
  
  <p><em>Firebug Error on click</em></p>
  
  <pre><code>TypeError: k.media.addEventListener is not a function
  </code></pre>