jplayerは何も起こっていません。

Question

私は現在jPlayerで自分のウェブサイトにサウンドクリップを追加していますが、再生をクリックすると何も起こりません。ページはちょうど私がリンクをクリックしたようにリロードします私のjavascript、そして変更されたDOM。

$("#jquery_jplayer").jPlayer({ 
      ready: function (event) { 
       $('.voice').click(function(e) { 
        $(this).jPlayer("setFile", $(this).attr('rel')).jPlayer("play"); 
       e.preventDefault(); 
       }); 
      }, 
      solution: "flash, html", // Flash with an HTML5 fallback. 
      swfPath: "/media/js/jPlayer/", 
      wmode: "window" 
     }); 
}); 



    <li><a href="" rel="<?php echo base_url(); ?>media/uploads/audio/<?php echo $candidate_audio['url']; ?>" class="voice">Play Voice Over</a></li> 

フラッシュホルダーすぎdomReadyに変更

<div id="jquery_jplayer"></div> 

....

<div id="jquery_jplayer" style="width: 0px; height: 0px;"> 
    <img id="jp_poster_0" style="width: 0px; height: 0px; display: none;"> 
    <object width="1" height="1" id="jp_flash_0" data="/media/js/jPlayer/Jplayer.swf" type="application/x-shockwave-flash" style="width: 0px; height: 0px;"> 
    <param name="flashvars" value="jQuery=jQuery&amp;id=jquery_jplayer&amp;vol=0.8&amp;muted=false"> 
    <param name="allowscriptaccess" value="always"> 
    <param name="bgcolor" value="#000000"> 
    <param name="wmode" value="window"> 
    </object> 
</div> 

Answer 1

それは私がjPlayerを使用するのでしばらくして、私はこの行を考えています：$(this).jPlayer("setFile"...です問題。クリックハンドラでこれを行っているので、thisはおそらく間違った要素を指しているでしょう。私はこれを試してみる：

$("#jquery_jplayer").jPlayer({ 
    ready: function (event) { 
     var $this = $(this); 
     $('.voice').click(function(e) { 
      $this.jPlayer("setFile", $(this).attr('rel')).jPlayer("play"); 
      e.preventDefault(); 
     }); 
    }, 
    solution: "flash, html", // Flash with an HTML5 fallback. 
    swfPath: "/media/js/jPlayer/", 
    wmode: "window" 
}); 

Answer 2

これは私のために働いています。

$(document).ready(function(){ 

    $('[class^="jp-"]').click(function (e) { e.preventDefault(); }); 

    $("#jquery_jplayer").jPlayer({ 
     ready: function() { 
      $(this).jPlayer("setMedia", { 
       mp3: "/music/mySong.mp3" 
      }); 
     }, 
     swfPath: "/jPlayer/js", 
     supplied: "mp3", 
     volume: 0.6 
    }); 
}); 

あなたの場合、次のことを試すことができます。クリックハンドラを割り当てると、リンクをクリックしたときのデフォルトの動作がブロックされます。 preventDefault()が関数内の最初の項目でなければなりません...

$(document).ready(function(){ 
    $("#jquery_jplayer").jPlayer({ 
     ready: function (event) { 
      $('.voice').click(function(e) { 
       e.preventDefault(); // <-- first item in this function 
       $(this).jPlayer("setFile", $(this).attr('rel')).jPlayer("play"); 
      }); 
     }, 
     solution: "flash, html", // Flash with an HTML5 fallback. 
     swfPath: "/media/js/jPlayer/", 
     wmode: "window" 
    }); 
}); 

はまた、あなたのオリジナルのポストに、あなたはどちらかSOやプログラミングエラーの簡単なタイプミスを作ったことに注意してください。余分な組の閉じ括弧});があるか、最初のdocument.ready行を間違った位置に置いたままにしています。

 $("#jquery_jplayer").jPlayer({ 
      ready: function (event) { 
       $('.voice').click(function(e) { 
        $(this).jPlayer("setFile", $(this).attr('rel')).jPlayer("play"); 
       e.preventDefault(); 
       }); 
      }, 
      solution: "flash, html", // Flash with an HTML5 fallback. 
      swfPath: "/media/js/jPlayer/", 
      wmode: "window" 
     }); 
}); // <--- remove extra closing brackets