7

That's my question, and here's my example code.

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');});

If you click a thumbnail to launch FancyBox, afterLoad will drop in the header, but when you click the image and watch the console you get nothing.

Thoughts? I'm trying to use FancyBox's $.fancybox.close() method, but if I can't get the click event to fire, I'm forced to using it inline, which I'd rather not do for the sake of not using JS inline.

4

1 に答える 1

2

.on()または同等の動的バインドを使用するか、afterLoad コールバックでバインドする必要があります。Fancybox とは関係ありません。DOM にまだ存在しないものと一致する jQuery セレクターを使用してバインドしています。別の方法として、メモリ内の要素に直接バインドすることもできますが、最初に DOM バインディングを操作することに慣れる必要があります。

于 2012-09-13T22:33:15.777 に答える