AJAX 동적 재생 목록에서 노래가 재생되지 않습니다.

Question

내 웹 앱용 뮤직 플레이어를 만들고 있습니다. 사용자가 서버에 일부 mp3 파일을 업로드하면 AJAX를 통해 데이터베이스에 자동으로 재생 목록이 생성됩니다. 나는 좋은 간단한 jQuery 플러그인 음악 플레이어를 발견 here

나는이 같은 내 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 호출을 통해 파일 목록을 생성하고 jplay와 함께 #playlist에 넣기로 결정했습니다. 하나이에게 같이 :

문제가

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

, 재생 목록 : 다음

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와 문서 준비 범위에서이 코드 (플러그인 명령에 따라)를 넣어 각 항목의 재생 버튼을 사용하여 성공적으로로드 할 수 있지만 노래가 재생되지는 않습니다. 내 코드에 실수가 있습니까? 제발 도와주세요. 감사합니다

Answer 1

내 생각 엔 아약스로 재생 목록을 채우므로 이니셜 라이저는 아직 존재하지 않기 때문에 (해당 상태의 문서 준비 범위에서) 해당 요소가 보이지 않습니다.

대신, 아약스 콜백에서 .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" 
       } 
      ); 

}