title: Catching all audio end events from dynamic content in jquery
body: <p>I have seen similar questions - but not that fix my problem!</p>
  
  <p>I have audio on my page and when one ends, I want the next to start, but I can't even get the ended to trigger...</p>
  
  <p>I cut the code down to this:</p>
  
  <pre><code>function DaisyChainAudio() {
      $().on('ended', 'audio','' ,function () {
          alert('done');
      });
  }
  </code></pre>
  
  <p>This is called from my page/code (and is executed, setting a break point shows that).</p>
  
  <p>As far as I understand this should set the handler at the document level, so any 'ended' events from any 'audio' tag (even if added dynamically) should be trapped and show me that alert...</p>
  
  <p>But it never fires.</p>
  
  <p><strong>edit</strong></p>
  
  <p>With some borrowing from Çağatay Gürtürk's suggestion so far have this...</p>
  
  <pre><code>function DaisyChainAudio() {
          $(function () {
          $('audio').on('ended', function (e) {
              $(e.target).load();
              var next = $(e.target).nextAll('audio');
              if (!next.length) next = $(e.target).parent().nextAll().find('audio');
              if (!next.length) next = $(e.target).parent().parent().nextAll().find('audio');
              if (next.length) $(next[0]).trigger('play');
          });
      });
  }
  </code></pre>
  
  <p>I'd still like to set this at the document level so I don't need to worry about adding it when dynamic elements are added...</p>