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

Question

I am trying to link Fancy box links so that when creating new links it will still work. I saw a few more questions here, but actually did not answer. This is what I am trying to do.

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

This works fine, but when the page or links reload with ajax, it does not work. I tried to use live (), but I could not get it to work. How do you double-check or implement live on fancybox? Any way to do this? Thanks

Answer 1

I personally use jQuery live function .

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

. , , jQuery 1.4.2 IE, 1.4.1, , . ( "live" () "change", JQuery 1.4.2 IE ( 1.4.1) " Google, , )

,

Answer 2

.

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

Answer 3

You will probably have to include a call to the faceybox function 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'
     });
  }
});