title: jQuery - $(audio).on('ended' function()) only ever fires once, on first element
body: <p>I've just started on jQuery, and followed a tutorial to build an Audio player.</p>
  
  <p>I want my audio, each time a song ends, to go to the next song and play it, automatically.</p>
  
  <p>I checked an answer on here that followed the exact tutorial I did, but the answer didn't solve the problem.</p>
  
  <p>I have marked the non working function with "BROKEN"</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var audio;
  
  //hide pause button
  $('#pause').hide();
  
  //initialize first song
  initAudio($('#playlist li:first-child'));
  
  function initAudio(element){
      var song = element.attr('song');
      var artist = element.attr('artist');
      
      // Create Audio Object
      audio = new Audio('music/'+ song + '.mp3');
      
      // If no song loaded, show 0:00
      if(!audio.currentTime){
          $('#duration').html('0:00');
      }
      // otherwise get duration and show
      showDuration();
      
      // Get artist and song title
      $('#audio-player .audio-title').text('- ' + song);
      $('#audio-player .audio-artist').text(artist);
      
      $('#playlist li').removeClass('active-audio');
      element.addClass('active-audio');
  }
  
  // click playlist song
  $('#playlist li').click(function(){
    audio.pause();
    initAudio($(this));
    audio.play();
    showDuration();
    $('#play').hide();
    $('#pause').show();
  });﻿
  
  // play button
  $('#play').click(function (){
      audio.play();
      $('#play').hide();
      $('#pause').show();
      $('#duration').fadeIn(400);
      showDuration();
  });
  // pause button
  $('#pause').click(function (){
      audio.pause();
      $('#pause').hide();
      $('#play').show();
      $('#duration').fadeIn(400);
      showDuration();
  });
  
  // Next button
  $('#next').click(function(){
      audio.pause();
      var next = $('#playlist li.active-audio').next();
      if(next.length == 0){
          next = $('#playlist li:first-child');
      }
      initAudio(next);
      audio.play();
      showDuration();
      if($('#play').is(':visible')){
          $('#play').hide();
          $('#pause').show();
      }
  });
  
  // Prev button
  $('#prev').click(function(){
      audio.pause();
      var prev = $('#playlist li.active-audio').prev();
      if(prev.length == 0){
          prev = $('#playlist li:last-child');
      }
      initAudio(prev);
      audio.play();
      showDuration();
      if($('#play').is(':visible')){
          $('#play').hide();
          $('#pause').show();
      }
  });
  
  // Volume Control
  $('#volume').change(function(){
      audio.volume = parseFloat(this.value / 100);
  });
  
  // Time Duration
  function showDuration(){
      $(audio).on('timeupdate', function(){
          //get hours $ mins
          var s = parseInt(audio.currentTime % 60);
          var m = parseInt((audio.currentTime)/60) %60;
          // Add 0 if &lt; 10
          if(s &lt; 10){
              s = '0'+s;
          }
          $('#duration').html(m + ':' + s);
          var value = 0;
          if(audio.currentTime &gt; 0){
              value = ((100 / audio.duration) * audio.currentTime);
          }
          $('#progress').css('width',value+'%');
          });
  }
  
  // if song ended, go to next ==== BROKEN
  $(audio).on('ended', function(){
      $('#next').trigger('click');
  });
  
  // click progress bar
  $("#progressbar").mousedown(function(e){
      var leftOffset = e.pageX - $(this).offset().left;
      var songPercents = leftOffset / $('#progressbar').width();
   audio.currentTime = songPercents * audio.duration;
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>The function is supposed to trigger the click event on '#next' when the audio has ended. The click event for next works fine when clicked, and triggering works fine in the console, when listening for audio.on('ended'), it only ever fires once, and only ever fires on the first song.</p>
  
  <p>Any help would be appreciated.</p>
  
  <p>Thanks!</p>
  
  <p>I have added in the html as a reference if needed </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="audio-container"&gt;
      
      &lt;!-- controls --&gt;
      &lt;div id="audio-player"&gt;
          &lt;span class="audio-artist"&gt;&lt;/span&gt;
          &lt;span class="audio-title"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="clearfix"&gt;
          &lt;div id="audio-controls"&gt;
              &lt;div id="play-pause"&gt;
                  &lt;button id="play"&gt;&lt;/button&gt;
                  &lt;button id="pause"&gt;&lt;/button&gt;
              &lt;/div&gt;
              &lt;div id="tracker"&gt;
                  &lt;div id="progressbar"&gt;
                      &lt;span id="progress"&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="duration"&gt;&lt;/div&gt;
              &lt;div id="volume-wrapper"&gt;
              &lt;div id="speaker-icon"&gt;&lt;/div&gt;
              &lt;div id="volume-div"&gt;
                  &lt;input id="volume" type="range" min="0" max="100" value="100"&gt;
              &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="audio-buttons"&gt;
          &lt;a id="prev"&gt;«&lt;/a&gt;
          &lt;a id="next"&gt;»&lt;/a&gt;
      &lt;/div&gt;
      &lt;!-- end controls --&gt;
      
      &lt;!-- input audio tracks here --&gt;
      &lt;div class="clearfix"&gt;
          &lt;ul id="playlist"&gt;
              &lt;li song="Dystopia" artist="Tesseract"&gt;
                  &lt;div class="track-no"&gt;01.&lt;/div&gt;
                  &lt;div class="track-name"&gt;Tesseract - Dystopia&lt;/div&gt;
                  &lt;div class="track-len"&gt;6:53&lt;/div&gt;
              &lt;/li&gt;
              &lt;li song="Messenger" artist="Tesseract"&gt;
                  &lt;div class="track-no"&gt;02.&lt;/div&gt;
                  &lt;div class="track-name"&gt;Tesseract - Messenger&lt;/div&gt;
                  &lt;div class="track-len"&gt;3:34&lt;/div&gt;    
              &lt;/li&gt;
              &lt;li song="Tourniquet" artist="Tesseract"&gt;
                  &lt;div class="track-no"&gt;03.&lt;/div&gt;
                  &lt;div class="track-name"&gt;Tesseract - Tourniquet&lt;/div&gt;
                  &lt;div class="track-len"&gt;5:57&lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!-- end input --&gt;
      
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>