apply event after DOM modifies

Question

This is probably a very common question but here it goes. I created an image carousel for some small thumbs pics . When i click on a thumb it makes it slightly bigger and adds the id #click to it . I want to add the fancybox viewer if you click it again. Obviously $('a#click').click() did not work because the element is created afterwards, how to i make the script take into consideration these modifications ? I tryed

 $('a#click').live('click', function() {
   $(this).fancybox();
 });

But that didn't work.

Answer 1

.fancybox() attaches the fancybox behavior, but it doesn't actually open it, it gets it ready for the next click event...so you need to trigger that handler it just attached. The most optimal way is with .triggerHandler() which will only trigger the handler and not bubble, like this:

 $('a#click').live('click', function() {
   $(this).fancybox().triggerHandler('click');
 });