php - onclick が audio.js の価値がない

Question

audio.jsをオーディオ プレーヤーとして使用するWeb サイトのトラブルシューティングを行っています。クリック メソッドを使用してオーディオ プレーヤーのイベント コールバックを設定しようとしていますが、クリックが認識されません。ただし、このjsfiddle では正常に機能します。どんな助けでも大歓迎です

私がやったこと - すべての CSS と無関係なスクリプトを削除しました。click メソッドは、audiojs クラスの前後の div で機能します。

オーディオプレーヤーに使用しているショートコード -

// 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;
}

Chrome の inspect 要素での出力

<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>

私のテストクリック方法

jQuery(document).ready(function($) {  

$( ".audiojs" ).click(function() {
  alert( "CLICK" );
});

audio.js の初期化

audiojs.events.ready(function() {
    audiojs.createAll();
});