ajax调用后未将fancybox附加到链接 [英] fancybox not attached to links after ajax call

问题描述

我使用fancybox通过将较小的照片放在链接中来显示较大的照片.这很好.工具提示jQuery应用程序存在一个小问题，这就是为什么我得到var'title_from_alt'并以此来设置fancybox标题的原因.没什么关系.

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.

好的，现在我正在通过AJAX调用来检索页面.在部分上，有类"fancyboxfoto"的新链接.但是这些新添加的链接没有附加花哨框.

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.

我阅读了有关.on和.live等的内容，但是他们似乎想要一个事件(例如"click")，但是在下面的代码中我看不到事件"click".该怎么办！?

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

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>

推荐答案

fancybox v1.3.x不支持动态添加的元素.

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

您可以在此处找到解决方法(包括示例)

You can find a workaround here (examples included)

顺便说一句，如果使用该方法，则无需"在通过AJAX检索新的DOM元素后再次初始化花式框" "

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

这篇关于ajax调用后未将fancybox附加到链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！