AJAXダイナミックプレイリストで曲が再生されません

Question

私のウェブアプリケーション用のミュージックプレーヤーを作っています。ユーザーがサーバーにいくつかのmp3ファイルをアップロードすると、データベースへのAJAX呼び出しを介してプレイリストが自動的に生成されます。私は良いシンプルなjQueryプラグインの音楽プレーヤーを見つけhere

私はこの1つのように私のHTMLに手動でファイル参照を含める場合、それは完璧に動作します：

<div id="playlist"> 
       <div href="./media/Maria (Extended remix) - Blondie .mp3" style="width: 400px;" class="item"> 
      <div> 
       <div class="fr duration">02:06</div> 
       <div class="btn play"></div> 
       <div class="title"><b>Blondie</b> - Maria</div> 
      </div> 
      <div class="player inactive"></div> 
     </div> 

しかし、百.MP3ありますので、それは私のためのソリューションではありませんファイルをサーバーに保存します。だから、私はajax呼び出しを介してファイルリストを生成し、＃playlistにjqueryで入れることにしました。

function refresh_song_list() 
{ 
    $.ajax({ 
     type: 'GET', 
     url: 'profile/get_song', 
     dataType: 'json', 
     success: function(data) { 
      var str=''; 
      for(i=0;i<data.length;i++) 
      { 
       str = str + ('<div href="'+ data[i][song_url]+'" style="width: 400px;" class="item"><div><div class="fr duration">02:06</div><div class="btn play"></div><div class="title"><b>'+ data[i]['artist']+'</b> '+ data[i]['song_title'] +'</div></div><div class="player inactive"></div></div>'); 
      } 
      $('#playlist').html(str); //this line add the songlist(playlist) into the #playlist div 
     } 
    }); 
} 

続いて、プレイリストを再生可能にするために、私はjqueryのドキュメント準備スコープで（プラグインの指示に従って）、このコードを配置：このような

$("#playlist").playlist(
       { 
        playerurl: "js/jquery/jquery-plugins/drplayer/swf/drplayer.swf" 
       } 
      ); 

問題は、プレイリストであります各項目の再生ボタンで正常に読み込まれますが、曲は再生されません。私のコードに間違いはありますか？みんな助けてください。ありがとう

Answer 1

プレイリストにajaxを設定しているため、.playlist()イニシャライザはまだ存在しないため、これらの要素は表示されません。

代わりに、あなたのAJAXコールバックで.playlist()を呼び出す：

 success: function(data) { 
      var str=''; 
      for(i=0;i<data.length;i++) 
      { 
       str = str + ('<div href="'+ data[i][song_url]+'" style="width: 400px;" class="item"><div><div class="fr duration">02:06</div><div class="btn play"></div><div class="title"><b>'+ data[i]['artist']+'</b> '+ data[i]['song_title'] +'</div></div><div class="player inactive"></div></div>'); 
      } 
      $('#playlist').html(str); //this line add the songlist(playlist) into the #playlist div 

      $("#playlist").playlist(
       { 
        playerurl: "js/jquery/jquery-plugins/drplayer/swf/drplayer.swf" 
       } 
      ); 
     } 

Answer 2

function refresh_song_list() 
{ 
    $.ajax({ 
     type: 'GET', 
     url: 'profile/get_song', 
     dataType: 'json', 
     success: function(data) { 
      var str=''; 
      for(i=0;i<data.length;i++) 
      { 
       str = str + ('<div href="'+ data[i][song_url]+'" style="width: 400px;" class="item"><div><div class="fr duration">02:06</div><div class="btn play"></div><div class="title"><b>'+ data[i]['artist']+'</b> '+ data[i]['song_title'] +'</div></div><div class="player inactive"></div></div>'); 
      } 
      $('#playlist').html(str); //this line add the songlist(playlist) into the #playlist div 
      bindPlaylist(); 

     } 
    }); 
} 



function bindPlaylist() 
{ 

$("#playlist").playlist(
       { 
        playerurl: "js/jquery/jquery-plugins/drplayer/swf/drplayer.swf" 
       } 
      ); 

}