title: jQuery and Audio.js: song dynamically added to playlist not playing or recognizing
body: <p>I have been using audio.js to make dynamic playlist. When a user clicks on a link in an Un-Ordered List, it is added to a Ordered list (<code>&lt;ol&gt;</code>) that servers a the audio players playlist.</p>
  
  <p>I have the jQuery working, adding the new list item from the Un-Ordered list to the Ordered list. However, the player does not play the newly-added song when clicked, and it doesn't go to it as the next track.</p>
  
  <p>The audio player only plays the songs that were <em>initially</em> in its playlist when the website was loaded, but does not recognize the songs I have added after loading. Any help?</p>
  
  <p>Here is a link to the audio.js example playlist: <a href="http://kolber.github.io/audiojs/demos/test6.html" rel="nofollow">http://kolber.github.io/audiojs/demos/test6.html</a></p>
  
  <p>Here is a link to my version with jQuery-added songs: <a href="http://tinyurl.com/kg9clpb" rel="nofollow">http://tinyurl.com/kg9clpb</a></p>
  
  <p>Audio.js Demo Source Code for setting up player:</p>
  
  <pre><code>&lt;script&gt;
   $(function() { 
   // Setup the player to autoplay the next track
      var a = audiojs.createAll({
        trackEnded: function() {
          var next = $('ol li.playing').next();
          if (!next.length) next = $('ol li').first();
          next.addClass('playing').siblings().removeClass('playing');
          audio.load($('a', next).attr('data-src'));
          audio.play();
        }
      });
  
      // Load in the first track
      var audio = a[0];
          first = $('ol a').attr('data-src');
      $('ol li').first().addClass('playing');
      audio.load(first);
  
      // Load in a track on click
      $('ol li').click(function(e) {
        e.preventDefault();
        $(this).addClass('playing').siblings().removeClass('playing');
        audio.load($('a', this).attr('data-src'));
        audio.play();
      });
      // Keyboard shortcuts
      $(document).keydown(function(e) {
        var unicode = e.charCode ? e.charCode : e.keyCode;
           // right arrow
        if (unicode == 39) {
          var next = $('li.playing').next();
          if (!next.length) next = $('ol li').first();
          next.click();
          // back arrow
        } else if (unicode == 37) {
          var prev = $('li.playing').prev();
          if (!prev.length) prev = $('ol li').last();
          prev.click();
          // spacebar
        } else if (unicode == 32) {
          audio.playPause();
        }
      })
    });
   &lt;/script&gt;
  </code></pre>
  
  <p>HTML for Aud-oplayer and Both lists:</p>
  
  <pre><code>  &lt;audio &gt;&lt;/audio&gt;
    &lt;h2&gt;Playlist&lt;/h2&gt;
    &lt;ol id="userPlaylist"&gt;
      &lt;li&gt;&lt;a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3"&gt;dead wrong intro&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3"&gt;juicy-r&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/03-its-all-about-the-crystalizabeths.mp3"&gt;it's all about the crystalizabeths&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/04-islands-is-the-limit.mp3"&gt;islands is the limit&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/05-one-more-chance-for-a-heart-to-skip-a-beat.mp3"&gt;one more chance for a heart to skip a beat&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/06-suicidal-fantasy.mp3"&gt;suicidal fantasy&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/07-everyday-shelter.mp3"&gt;everyday shelter&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/08-basic-hypnosis.mp3"&gt;basic hypnosis&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/09-infinite-victory.mp3"&gt;infinite victory&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/10-the-curious-incident-of-big-poppa-in-the-nighttime.mp3"&gt;the curious incident of big poppa in the nighttime&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/11-mo-stars-mo-problems.mp3"&gt;mo stars mo problems&lt;/a&gt;&lt;/li&gt;
    &lt;/ol&gt;
    &lt;h3&gt;Songs Not it Playlist - Click to add to Playlist&lt;/h3&gt;
    &lt;ul id="mainSite"&gt;
    &lt;li&gt;&lt;a href="#" data-src="http://www.jussbuss.tv/testing/sapi/mp3/john-fenton_dive-table.mp3"&gt;john-fenton_dive-table&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>My code for adding a song from another list on click: </p>
  
  <pre><code> &lt;script&gt;
   $("ul#mainSite li").on("click", "a", function(e){
  
       e.preventDefault();
  
  
        var addLink = $(this).attr('data-src');
  
  
        $("ol#userPlaylist").append('&lt;li&gt; &lt;a href="#" data-src="'+addLink+'"&gt;NEW 
            SONG&lt;/li&gt;');
  
       });
  
   &lt;/script&gt;
  </code></pre>