jPlayer 자바 스크립트 이벤트 트리거는 첫 번째 노래에서만 작동합니다.

Question

application.js에 있습니다. 작동하지만 첫 번째 노래에서만 작동합니다.

첫 번째 곡은 노래가 재생되고 두 번째 곡은 5 % (결국 75 %로 노래 재생으로 계산됩니다)입니다.

$(document).ready(function(){ 
    $("#jquery_jplayer_1").bind($.jPlayer.event.play, function(event) { 
     $("#jquery_jplayer_1").unbind($.jPlayer.event.play) 
     var band = event.jPlayer.status.media.band; 
     var song = event.jPlayer.status.media.song; 
     $.get("/playlists/song_display?song=" + song + "&band=" + band); 
    }); 

    $("#jquery_jplayer_1").bind($.jPlayer.event.timeupdate, function(event) { 
     if (parseInt(event.jPlayer.status.currentPercentAbsolute) >= 5) { 
     $("#jquery_jplayer_1").unbind($.jPlayer.event.timeupdate) 
     var band = event.jPlayer.status.media.band; 
     var song = event.jPlayer.status.media.song; 
     $.get("/playlists/song_counter?song=" + song + "&band=" + band); 
     } 
    }); 
}); 

편집 : 이반에

덕분에이 코드를 결국 : 당신이 요소 ID를 사용하여 요소를 선택하는 것처럼

$(document).ready(function(){ 
    $("#jquery_jplayer_1").bind($.jPlayer.event.play, function(event) { 
     debugger 
     var band = event.jPlayer.status.media.band; 
     var song = event.jPlayer.status.media.song; 
     $.get("/playlists/song_display?song=" + song + "&band=" + band); 

     $("#jquery_jplayer_1").bind($.jPlayer.event.timeupdate, function(event) { 
      if (parseInt(event.jPlayer.status.currentPercentAbsolute) >= 5) { 
      debugger 
      $("#jquery_jplayer_1").unbind($.jPlayer.event.timeupdate) 
      var band = event.jPlayer.status.media.band; 
      var song = event.jPlayer.status.media.song; 
      $.get("/playlists/song_counter?song=" + song + "&band=" + band); 
      } 
     }); 
    }); 
}); 

Answer 1

이 보이는

$("#jquery_jplayer_1").bind(...) 

이는 것 id jquery_jplayer_1과 일치하는 첫 번째 요소에 적용하십시오.

이벤트를 여러 요소에 바인딩하려는 경우 대신 클래스 선택기를 사용할 수 있습니다.

$(".jquery_jplayer").bind(...)