fancybox not attached to links after ajax call

问题

I use fancybox to show larger photo's by enclosing a smaller photo in a link. This works fine. There was small problem with a tooltip jQuery app, that's why I get the var 'title_from_alt' and set the fancybox title with that. It's not so relevant.

Okay, now I am retrieving a page via an AJAX-call. On the partial, there are new links with class 'fancyboxfoto'. But these newly added links do not have the fancybox attached to them.

I read about .on and .live and so on, but they seem to want an event (like 'click') but in the code below I don't see an event 'click'. What to do!?

jQuery(document).ready(function($){

//fancybox
var title_from_alt = $("a.fancyboxfoto").attr("alt");
$("a.fancyboxfoto").fancybox({
    'titlePosition'     : 'over',
    'onComplete'    :   function() {
        $("#fancybox-wrap").hover(function() {
            $("#fancybox-title").show();
        }, function() {
            $("#fancybox-title").hide();
        });
    },
    'overlayColor'      : '#000',
    'title'         : title_from_alt,
    'overlayOpacity'    : 0.9,
    'showCloseButton' : 'true',
    'autoScale' : 'true',
    'autoDimensions' : 'true'
});
});

the HTML

<a class="fancyboxfoto" title=" Tirzo Martha, Shipwrecked, 2002 " href="/images/Shipwrecked.jpg">
  <img class="tiptip" vspace="12" hspace="12" align="left" title=" Tirzo Martha, Shipwrecked, 2002 " src="/images/Shipwrecked-kl.jpg">
</a>

回答1:

fancybox v1.3.x doesn't support dynamically added elements.

You can find a workaround here (examples included)

BTW, if using that method, you don't need to "initialize the fancybox again after retrieving new DOM elements via AJAX"

回答2:

You should initialize the fancybox again after retreiving new DOM elements via AJAX.

来源：https://stackoverflow.com/questions/11401746/fancybox-not-attached-to-links-after-ajax-call

标签

jquery

fancybox