Search code examples
javascriptruby-on-railsjplayer

jPlayer javascript event triggers only works on first song


have this in application.js ... they work, but only for the first song.

first one is on song play, and the second is at 5% (which will eventually be 75%, to count as a song play).

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

EDIT:

thanks to Ivan, ended up with this code:

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

Solution

  • Looks like you are selecting your elements using element ids

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

    This will only apply to the first element matching the id jquery_jplayer_1.

    If you want to bind events to multiple elements, you could use a class selector instead.

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