Use jQuery Fancybox(lightbox type dialog) with dynamically loaded links

I'm trying to bind Fancy box links so that when the new links are created it w开发者_开发知识库ill still work. I've seen a few other question on here but not really answered. This is what I'm trying to do.

jQuery("a#[id^='domore_']").fancybox({
'autoDimensions' : false,
'width'           : 'auto',
'height'          : 'auto'
});

This works fine but when the page or links are reloaded by ajax it doesn't work. I tried using live() but I couldn't get it to work. How do you rebind or implement live on fancybox? Any way to do this? Thanks

I personally use jQuery's live function.

jQuery("a#[id^='domore_']").live('click', function(){
    jQuery.fancybox({
        'autoDimensions'  : false,
        'width'           : 'auto',
        'height'          : 'auto',
        'href'            : $(this).attr('href')
    });
    return false;
});

Note: Not really related to your issue but be warned that jQuery 1.4.2 has a bit of an issue when using the change event on a select in IE but 1.4.1 seems to be fine for now. (search "live() method for 'change' event broken in Jquery 1.4.2 for IE (worked in 1.4.1)" on Google, I can't add the link as I'm new)

Hope it helps

You can use this. It worked for me

$('.address').live('click',
function(){                 
    $(this).fancybox({
        'width'         : '40%',
        'height'        : '70%',
        'autoScale'     : false,
        'transitionIn'  : 'none',
        'transitionOut' : 'none',
        'type'          : 'iframe',
        'onClosed'      : function() {
            $("#basket").load("/order/basket");   
        }
    }).trigger("click"); 
    return false;
});

You will probably have to include the faceybox function call in your ajax success/callback method:

$.ajax({
  url: 'test.html',
  success: function(data) {
    $('.result')
     .html(data)
     .find("a#[id^='domore_']").fancybox({
       'autoDimensions' : false,
       'width'          : 'auto',
       'height'         : 'auto'
     });
  }
});