2012-09-13 1 views
7

그건 내 질문이고, 여기에 내 예제 코드가있다.Fancybox 뮤트 클릭 이벤트가 있습니까?

HTML :

<a class="fancybox" rel="group" href="img1.jpg"> <img src="img1_thumb.jpg"> </a> 
<a class="fancybox" rel="group" href="img2.jpg"> <img src="img2_thumb.jpg"> </a> 

JS :

var header = '<img id="w" src="logo.gif">'; 

$('.fancybox').fancybox({ 
    afterLoad: function() { 
     this.wrap.prepend(header); 
    }, // afterLoad 
}); //fancybox 

$('#w').click(function() {console.log('clicked');}); 

당신이 FancyBox를 시작하려면 썸네일을 클릭하면, afterLoad이 헤더에 떨어질 것이다,하지만 때 이미지를 클릭하고 콘솔을보고 너는 아무것도 얻지 못한다.

생각하십니까? FancyBox의 $.fancybox.close() 메서드를 사용하려고하는데, 클릭 이벤트를 발생시킬 수 없다면 인라인을 사용해야합니다. JS 인라인을 사용하지 않기 위해서입니다.

답변

2

afterLoad 콜백에서 동적으로 바인딩하거나 바인딩하려면 .on() 또는 이와 동등한 것을 사용해야합니다. Fancybox와는 아무런 관련이 없습니다. 아직 DOM에없는 것과 일치하는 jQuery 선택기를 사용하여 바인딩합니다. 또는 메모리에있는 요소에 직접 바인딩 할 수도 있지만 먼저 DOM 바인딩으로 작업 할 때는 편안하게 성장해야합니다.

+0

헤더를 추가 한 후'afterLoad' 함수에서'$ ('# w'). on ('click', function() {$. fancybox.close()}) –

+0

그랬어! 정말 고마워. –

+0

'afterLoad' 콜백에서'$ .fancybox.close()'함수가 최적이 아닌 바인딩을 추가한다고 생각했습니다. 다음 이미지로 스크롤하면 '새'헤더가 이벤트를 처리하지 않습니다. 클릭 처리기를 'afterShow' 콜백으로 이동하여 문제를 해결했습니다. –