title: How to correctly bind the html5 'ended' event to any future (jquery-produced) elements?
body: <p>The title explains most of it. I have a list of links that lead to videos and audio-files which I load in the page through javascript. The html looks somewhat like this:</p>
  
  <pre><code>&lt;html&gt;
  ...
  &lt;body&gt;
  ...
  &lt;div id="main"&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;a class="video" href="video/file1"&gt;video 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="audio" href="audio/file1"&gt;video 1&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/div&gt;
  ...
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My javascript then looks as follows. The idea is that when you click an audio link it will insert an audio tag, when you click a video link it will insert a video tag. Clicking anywhere on the page plays/pauses the audio/video. Everything works except the bottom block of code that is supposed to handle the 'ended' event. The idea is that you head back to the list of links when the media has finished. However it seems like the event won't bind at all.</p>
  
  <pre><code>$(document).ready(function() {
  
      var mediablock;
      var playing = false;
  
      $(".video").on("click", function() {
          var link = $(this).attr("href");
          $("#main").hide();
          $("body").append('&lt;video id="videoblock" width="'+$(window).width()+'" height="'+$(window).height()+'"&gt;&lt;source src="'+link+'.mp4" type="video/mp4"&gt;&lt;source src="'+link+'.ogg" type="video/ogg"&gt;&lt;/video&gt;');
          mediablock = $("#videoblock").get(0);
          mediablock.play();
          playing = true;
          return false;
      });
  
      $(".audio").on("click", function() {
          var link = $(this).attr('href');
          $("#main").hide();
          $("body").append('&lt;audio id="audioblock" width="'+$(window).width()+'"  height="'+($(window).height()-50)+'"&lt;source src="'+link+'.mp3" type="audio/mpeg"&gt;&lt;source src="'+link+'".ogg type="audio/ogg"&gt;&lt;/audio&gt;');
          mediablock = $("#audioblock").get(0);
          mediablock.play();
          playing = true;
          return false;
      });
  
      $(document).on("click", function() {
          if (playing)
          {
              mediablock.pause();
              playing = false;
          }
          else
          {
              mediablock.play();
              playing = true;
          }
      });
  
      $(document).on("ended", "audio, video", function() {
          alert('test');
      });
  
  });
  </code></pre>
  
  <p>I have tried different ways of binding the event. As above and as follows:</p>
  
  <pre><code>$("audio, video").bind("ended", function() {
      alert('test');
  });
  
  $("audio, video").on("ended", function() {
      alert('test');
  });
  </code></pre>
  
  <p>After all these tries I have no clue anymore on how to get this event caught correctly. Please help me out with this one so I can continue on my audio/video webapp.</p>
  
  <p>Thanks in advance! :)</p>
  
  <p>EDIT:
  I solved the problem by not recreating the video/audio tag but by only reassigning the sources of that tag. I gave the two source-tags inside the audio/video tag a class and then updated the src-attribute of those source-tags. The event binding then works as expected.</p>