動態添加一個jPlayer

Question

我有以下代碼，我正在試圖通過函數動態添加jplayers。

function audio_player(audio, title, type) { 

    var id = $('.audio').length; 

    $('#audio').append('<div id="jquery_jplayer_'+id+'" class="audio"></div><div id="jp_container_'+id+'" class="jp-audio"><div class="jp-type-single"><div class="jp-gui jp-interface"><ul class="jp-controls"><li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li><li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li><li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li><li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li><li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li><li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li></ul><div class="jp-progress"><div class="jp-seek-bar"><div class="jp-play-bar"></div></div></div><div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div><div class="jp-time-holder"><div class="jp-current-time"></div><div class="jp-duration"></div></div></div><div class="jp-title"><ul><li>'+title+'</li></ul></div><div class="jp-no-solution"><span>Update Required</span>To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.</div></div></div>'); 


    $("#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"); 
}); 

有了這個代碼，我得到的錯誤

TypeError: $(...).jPlayer is not a function 

wmode:"window" 

當我使用相同的代碼，只設置了，因爲他們在他們的演示（裏面的document.ready所有的JavaScript（）和靜態聲明）一切工作正常。

有什麼錯誤/如何解決它的任何想法？

Answer 1

最終被這樣解決它：

$(document).ready(function() { 
    function audio_player(audio, title, type) { 

     var id = $('.audio').length; 

     $('#audio').append('<div id="jquery_jplayer_'+id+'" class="audio" data-file="'+audio+'" data-type="'+type+'"></div><div id="jp_container_'+id+'" class="jp-audio"><div class="jp-type-single"><div class="jp-gui jp-interface"><ul class="jp-controls"><li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li><li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li><li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li><li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li><li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li><li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li></ul><div class="jp-progress"><div class="jp-seek-bar"><div class="jp-play-bar"></div></div></div><div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div><div class="jp-time-holder"><div class="jp-current-time"></div><div class="jp-duration"></div></div></div><div class="jp-title"><ul><li>'+title+'</li></ul></div><div class="jp-no-solution"><span>Update Required</span>To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.</div></div></div>'); 

     $('#jquery_jplayer_'+id).jPlayer({ 
      ready: function(event) { 
       $(this).jPlayer("setMedia", { 
        mp3: $(this).attr('data-file') 
       }); 
      }, 
      play: function() { // To avoid both jPlayers playing together. 
       $(this).jPlayer("pauseOthers"); 
      }, 
      swfPath: js, 
      cssSelectorAncestor:'#jp_container_'+id, 
      supplied: type, 
      errorAlerts: true, 
      warningAlerts: false, 
      wmode:"window" 
     }); 
    } 

    audio_player("file.mp3", "Test Title", "mp3"); 
    audio_player("file2.mp3", "Test2 Title", "mp3"); 
});