Appending dynamically generated html using jQuery does not play well with Fancybox

Question

I\'m using Fancybox (http://fancybox.net) to pop open an iFrame. In order to do so, I create a link with a class set to \"item_pop\" as so:

Answer 1

what's happening is that jQuery(".item_pop") finds elements matching the selector at that time and binds to those. Since you're creating new elements later, you need to bindto them.

After this call:

jQuery('#events').append(html);

You need to run the .fancybox() call again, on this set of new elements:

jQuery("#events .item_pop").fancybox({ ... });

---

Or alternatively (and less efficient) you can use the .livequery() plugin, like this:

jQuery(".item_pop").livequery(function() {
  jQuery(this).fancybox({
    'width'             : 900,
    'height'            : 500,
    'autoDimensions'    : true,
    'autoScale'         : true,
    'transitionIn'      : 'elastic',
    'titleShow'         : false,
    'transitionOut'     : 'elastic',
    'centerOnScroll'    : true,
    'type'              : 'iframe'
  });
});