Jquery 클릭 이벤트 - 두 번 클릭하여 실행해야합니다.

Question

이것은 매우 간단 할 수 있습니다. 그러나 나는 무슨 일이 일어나고 있는지 알아 내는데 어려움을 겪고 있습니다. JS 바이올린에

: 출력 '열기 비디오 모달'에 두 개의 링크가 있습니다 http://jsfiddle.net/3hHAX/

.

링크 텍스트에 나와있는 것처럼이 두 링크는 ​​모델 팝업을 YouTube 동영상에 포함시켜야합니다. 클릭 이벤트가 첫 번째 클릭에 트리거되지 않습니다 어떤 이유로 http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

:

이

은에서 prettyphoto 라이브러리를 사용하고 있습니다. 하지만 두 번째로 작동합니다.

(CSS가 포함되어 있지 않으므로 매우 모달은 보이지 않지만 최소한 데모 용으로는 아래에 내용로드가 표시됨).

누구나 무슨 일이 일어날 것이라고 제안 할 수 있습니까?

감사합니다,

스티브

Answer 1

감사합니다 얘들 아,

모두 응답은 내가 궁극적으로 그것을 해결 도왔다.업데이트 된 JSFiddle에서

엔드 솔루션 :

http://jsfiddle.net/3hHAX/6/

는 prettyPhoto 그것을 클릭 이벤트에 대한 자신의 부착, 그냥 그 DOM 요소에 적용 할 필요 보인다.

감사합니다, 스티브

Answer 2

트리거 당신이 그것을 초기화하고 만 한 번 초기화 할 수 있도록 한 후 클릭 이벤트.

(function($) {  
    $(".watch-this a, .field-name-field-embed-code a").live('click',function(){ 
     if (!$(this).is(".pPhoto")) { 
      $(this).prettyPhoto({ 
       social_tools: '' 
      }).addClass("pPhoto").click();  
     } 
     return false;  
    }); 
})(jQuery); 

데모 : 해명http://jsfiddle.net/3hHAX/3/

편집 :
이는 동적 요소에 플러그인을 초기화하는 매우 일반적인 방법입니다. 언급했듯이 요소가 동적이지 않은 경우 DOM 준비에서 초기화하는 것이 좋습니다.

참고 :
.live이 감가 상각, 당신이 정말로, 모든 .on

(function($) {  
    $(document).on("click",".watch-this a, .field-name-field-embed-code a",function(){ 
     if (!$(this).is(".pPhoto")) { 
      $(this).prettyPhoto({ 
       social_tools: '' 
      }).addClass("pPhoto").click();  
     } 
     return false;  
    }); 
})(jQuery); 

Answer 3

• 먼저 사용하는 DOM을가 정말로 어디 적 상황을 제외하고 JQuery와의 라이브 방법을 사용해서는 안됩니다 당신의 통제. 적어도 라이브 함수는 많은 시간을 허비하고 많은 문제를 일으킬 수 있으므로 위임 함수를 사용해야합니다 (이번에는 잘못되지 않았지만).
• 둘째, 가능한 한 클릭 이벤트가 실행됩니다. here을 참조하십시오. prettyPhotos 구성 요소는 처음에는 알 수없는 이유로 작동하지 않지만 이전 jsfiddle 링크에서 볼 수 있듯이 은이 처음 클릭 할 때 경고음이 발생하므로 소리가납니다. 나를 prettyphotos 스크립트의 버그 (Kevin B는 두 번째 클릭 이벤트를 트리거하여 hackishly 해결할 것으로 보인다.).