Onclick doesn't work worth audio.js - php

Question

I am troubleshooting a website that uses audio.js as an audio player. I am trying to configure the audio player's event callbacks using the click method, but it is not recognizing my click.
It does however work like it should on this jsfiddle. Any help is greatly appreciated
What I've done -
Eliminated all CSS and irrelevant scripts.
Click method works on divs before and after the audiojs class.
Shortcode that I'm using for the audio player -
// audio player
add_shortcode( 'sp_audio', 'sp_audio_shortcode' );
function sp_audio_shortcode( $atts, $contents = null )
{
extract( shortcode_atts( array(
'id' => 'sp-audio-player',
'url' => '',
),
$atts ) );
$output .= '<audio preload="none">';
$output .= '<source src="' . $url . '" type="audio/mpeg">';
$output .= '</audio>';
return $output;
}
Output in Chrome's inspect element
<div class="musicplayer">
<div class="audiojs" classname="audiojs" id="audiojs_wrapper5">
<audio preload="none">
<source src="http://soundtrackloops.com/Demo/Electronisounds-AcousticBarefootBeats-DEMO.mp3" type="audio/mpeg">
</audio>
<div class="play-pause">
<p class="play"></p>
<p class="pause"></p>
<p class="loading"></p>
<p class="error"></p>
</div>
<div class="scrubber">
<div class="progress"></div>
<div class="loaded"></div>
</div>
<div class="time">
<em class="played">00:00</em>/<strong class="duration">00:00</strong>
</div>
<div class="error-message"></div>
</div>
My test click method
jQuery(document).ready(function($) {
$( ".audiojs" ).click(function() {
alert( "CLICK" );
});
Initialize audio.js
audiojs.events.ready(function() {
audiojs.createAll();
});

Answer 1

Looks like you're appending the audio track after the page has loaded so you'll need to use a live click event.
Try this:
jQuery(document).ready(function($) {
$('.audiojs').live('click', function() {
alert( "CLICK" );
});

Answer 2

I had a similar issue and solved it by using event listeners on the audio object. I guess it depends on what you want to track but that gives you control over playing and stopping etc.
I adapted my code so it should be working with yours
audiojs.events.ready(function() {
var as = audiojs.createAll();
$(".audiojs audio").on('playing',function(){
console.log("Push playing");
});
// Other callbacks
});
Hope you get it working. I only have one player per page, if you have more just use the $(this) element in the callback to identify which has been altered.