AJAX 更新 DOM 后如何重新初始化（召回）FancyBox？答案

【问题标题】：How to reinitialize (recall) FancyBox after AJAX updated DOM?AJAX 更新 DOM 后如何重新初始化（召回）FancyBox？
【发布时间】：2015-08-18 16:20:58
【问题描述】：

我正在为灯箱使用 widgetkit 插件 (Joomla CMS)。由于widgetkit 使用fancybox 来显示灯箱，所以我在这里发布了一个问题。

当我不使用 AJAX 技术更新 Joomla 网站的内容时，FancyBox 工作得很好。当我启用 AJAX，并使用 ajax 技术刷新或移动到另一个页面时，灯箱效果消失了 - 图像本身在新窗口中打开。我认为这是因为 AJAX 更新了 DOM 而 FancyBox 无法识别。我在 AJAX 代码插件中确实有一个区域，我可以在其中编写某些 JavaScript 代码，这些代码将在 AJAX 完全加载网站后执行 AJAX。我只是想知道我应该在那里输入什么，将 FancyBox 初始化为 AJAX 刚刚生成的新 DOM。

对于 mootools 灯箱（如果我有的话），我可以简单地写下这一行：window.fireEvent('domready');

我不知道如何为 jQuery FancyBox 做到这一点。

我也在这里发布了同样的问题（如果有人需要更多信息）：http://skrij.me/Qv56

【问题讨论】：

标签： jquery fancybox

【解决方案1】：

您可以在每次更改 DOM 时调用 fancybox（例如，$(".fancybox").fancybox();），或者使用使用“实时”附加点击处理程序的版本 2

【讨论】：

我在 url 上使用的图片选择器是：所以我尝试了把 FLAX.Html.onall('load', function(o){ $("a[data-lightbox]").fancybox(); });还是不行。

【解决方案2】：

您需要创建用于初始化fancybox的函数，例如

function fancybox_init(){
        $("a[href*='.jpg'], a[href*='.png']").attr('rel', 'fancybox').fancybox({
            maxWidth  : 800,
            maxHeight : 600,
            fitToView : true,
            width     : '70%',
            height    : '70%',
            autoSize  : true,
            closeClick    : false,
            openEffect    : 'none',
            closeEffect   : 'none'
        });
    }

然后在ajax重新加载页面或添加新块后，只需在ajax方法的成功回调中调用此函数

【讨论】：