jplayer binding doesn't seem to work

Question

I've inherited a web player that uses jPlayer. It works fine for playing audio files, but I'm trying to set some hidden fields when the user plays a track and I cannot seem to get something bound to any event in jPlayer. I've used similar code to bind to a click event on an h1 tag and it works fine, but jplayer doesn't. No errors either. I got the bind examples from jPlayer's documention. Here is a snippet of what I'm trying to do:

 $(document).ready(function () {

    //listener for playing the file
    $("#jquery_jplayer_1").bind($.jPlayer.event.play, function (event) {

        alert('play');
    });
 });

Here is my html:

 <div id="jquery_jplayer_1" class="jp-jplayer"></div>

    <div id="jp_container_1" class="jp-audio" >
        <div class="jp-type-single">
            <div id="htmlPlayer" style="display: none">
                <audio id="audioPlayer" controls style="width:100%;">
                    <source id="mp3Source" type="audio/mp3" />
                </audio>
            </div>
            <div class="htmlHidePoint" style="display: none">
                <div class="jp-gui jp-interface">
                    <ul class="jp-controls">
                        <li><a href="javascript:;" onclick="javascript:alert('test');" 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>

                        <ul class="jp-toggles">
                            <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                            <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="jp-title">
                <ul>
                    <li><span id="songname">No Song Selected</span></li>
                </ul>
                <div class="under">
                    <ul>
                        <li><a href="#" onclick="ViewTranscript();return false;" onkeypress="ViewTranscript();return false;" tabindex="2">Transcript</a></li>
                        <li><a href="#" onclick="ViewDowloadOptions();return false;" onkeypress="ViewDowloadOptions();return false;" tabindex="2">Download</a></li>
                    </ul>
                </div>
            </div>
            <div class="htmlHidePoint" style="display: none">
                <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>
    </div>&nbsp;

The actual source files are loaded via the error option in the jPlayer method:

               error: function (event) {
                if (event.jPlayer.error.type == 'e_url_not_set') {
                    $(this).jPlayer("setMedia", {
                        mp3: '<%=ResolveUrl("~/Handlers/Podcasts.ashx") %>?command=ZipPodcast&PodcastID=' + selectedPodcast.ItemID + '&options=audio'
                    });

                    $(this).jPlayer("play");
                }
            },

Answer 1

Show html for the jPlayer. Make sure the id is correct.

Try specifying it on options instead:

$("#jquery_jplayer_1").jPlayer({
  play: function() {
    alert('hi');
  }
});

Are you binding before or after the jPlayer is initialised with your options?

Is the jPlayer on the page when you bind?

Answer 2

There is nothing wrong on your code, the way you create the event is right, normally alert('play') will poping up.

Try to put your statements under the jPlayer instantiation. If it's not working it could be because the instantiation wasn't success due some reasons. maybe the selector used to fetch the dom is wrong, etc...

$("#jquery_jplayer_1").jPlayer()
$("#jquery_jplayer_1").bind($.jPlayer.event.play, function (event) {
    alert('hi');
}); 

Also try to put the event as an options on jPlayer() method, as mentioned on answer by Martin Mazza Dawson