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

If you want your Fancybox to be worked with dynamic controls you should change in JQuery file of Fancybox.

This is what my jquery.fancybox-1.3.4.js looks like at around line 787:

$.fn.fancybox = function(options) {

   $(this)
.die('click.fb').live('click.fb', function(e) {

   $(this).data('fancybox', $.extend({}, options, ($.metadata ? $(this).metadata() :
{})))


   e.preventDefault();

after this code is same in the file.

once you change in the Fancybox JQuery file you will not need to change your code.

Answer 2

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

Answer 3

The problem as i see it is that fancybox doesn't know anything about these additional links, as the JavaScript is only interpreted as the page loads. You need to use jQuerys .Live() so that fancybox will be aware of any dynamically created content.