Does Fancybox Click disable events?

Question

What is my question and here is my sample 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 on the thumbnail to launch FancyBox, afterLoad will fall into the header, but when you click on the image and look at the console, you won’t get anything.

Thoughts? I am trying to use the FancyBox $.fancybox.close() method, but if I cannot fire the click event, I have to use it inline, which I would rather not do without using JS inline.

Answer 1

You must either use .on() or the equivalent to dynamically bind or bind in the afterLoad callback. This has nothing to do with Fancybox: you bind with a jQuery selector that matches what doesn't already exist in the DOM. Alternatively, you can try to bind directly to an element in memory, but you should be comfortable working with DOM binding.