title: Dynamically adding a jPlayer
body: <p>I have the following code which I was using to attempt to dynamically add jplayers via a function.</p>
  
  <pre><code>function audio_player(audio, title, type) {
  
      var id = $('.audio').length;
  
      $('#audio').append('&lt;div id="jquery_jplayer_'+id+'" class="audio"&gt;&lt;/div&gt;&lt;div id="jp_container_'+id+'" class="jp-audio"&gt;&lt;div class="jp-type-single"&gt;&lt;div class="jp-gui jp-interface"&gt;&lt;ul class="jp-controls"&gt;&lt;li&gt;&lt;a href="javascript:;" class="jp-play" tabindex="1"&gt;play&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="javascript:;" class="jp-pause" tabindex="1"&gt;pause&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="javascript:;" class="jp-stop" tabindex="1"&gt;stop&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="javascript:;" class="jp-mute" tabindex="1" title="mute"&gt;mute&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute"&gt;unmute&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume"&gt;max volume&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div class="jp-progress"&gt;&lt;div class="jp-seek-bar"&gt;&lt;div class="jp-play-bar"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="jp-volume-bar"&gt;&lt;div class="jp-volume-bar-value"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="jp-time-holder"&gt;&lt;div class="jp-current-time"&gt;&lt;/div&gt;&lt;div class="jp-duration"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="jp-title"&gt;&lt;ul&gt;&lt;li&gt;'+title+'&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="jp-no-solution"&gt;&lt;span&gt;Update Required&lt;/span&gt;To play the media you will need to either update your browser to a recent version or update your &lt;a href="http://get.adobe.com/flashplayer/" target="_blank"&gt;Flash plugin&lt;/a&gt;.&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;');
  
  
      $("#jquery_jplayer_"+id).jPlayer({
          ready: function () {
              $(this).jPlayer("setMedia", {
                  mp3: audio
              });
          },
          play: function() { // To avoid jPlayers playing together.
              $(this).jPlayer("pauseOthers");
          },
          swfPath: "../js",
          cssSelectorAncestor:"#jp_container_"+id,
          supplied: type,
          errorAlerts: true,
          warningAlerts: false,
          wmode:"window"
      });
  }
  
  
  $(document).ready(function() {
      audio_player("http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3", "Test Title", "mp3");
      audio_player("http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3", "Test2 Title", "mp3");
  });
  </code></pre>
  
  <p>With this code I am getting the error</p>
  
  <pre><code>TypeError: $(...).jPlayer is not a function 
  
  wmode:"window"
  </code></pre>
  
  <p>When I use the same code, only set up as they have it in their demos (all the javascript inside document.ready() and statically declared) everything works fine.</p>
  
  <p>Any ideas on what's going wrong/how to fix it?</p>