jplayer 클릭 플레이 아무 일도 일어나지 않습니다

Question

저는 현재 웹 사이트에 사운드 클립을 추가하기 위해 jPlayer를 사용하고 있습니다. 그러나 재생을 클릭하면 아무 일도 일어나지 않습니다 ... 링크를 클릭 한 것처럼 페이지가 다시로드됩니다. 내 HTML은 내 자바 스크립트, 그리고 또한 변경된 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> 

내가 jPlayer을 사용하기 때문에 오랜만

<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

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

너무 domReady에 변경 플래시 홀더 ...,하지만 난이 줄을 생각 : $(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