Fancybox 无法处理动态添加的外部链接答案

【问题标题】：Fancybox not working on dynamically added external linksFancybox 无法处理动态添加的外部链接
【发布时间】：2017-11-20 14:58:30
【问题描述】：

我有一个项目列表如下

<ul>
 <li><a href="http://toExtUrl/img.jpg" class="should-popout">
  <img src="http://mywebsite.com/icon.png"></a>
 </li>
</ul>

toExtUrl/img.jpg 是动态添加的，它有时可能会显示 pdf 或 HTML 内容而不是图像（这始终是外部链接）。我正在尝试为'.should-popout'的href属性提供fancybox弹出效果。

但是当点击它时，只会重定向到外部 url。我的fancybox选项如下

$(window).load(function(){
 $('a.should-popout').fancybox({
    'autoDimensions' : true,
    'autoScale' : true
    'hideOnContentClick': true,
    'showCloseButton' : true
 });
});

设置中可能有什么错误。

【问题讨论】：

标签： jquery html fancybox

【解决方案1】：

我建议你升级到 v3 并像这样使用：

$().fancybox({
  selector : '.should-popout'
});

v2 尝试获取当前选择器（使用这个方便的https://api.jquery.com/selector/ 属性），然后使用它来创建委托事件处理程序。但是 jQuery v3 删除了该功能，因此不再起作用。因此 v3 允许使用这种新语法。

【讨论】：

感谢工作.. +1。我使用的是 fancybox 版本 3 并遵循旧版本的文档。 @milind Patel 也提出了同样的建议..
是的，他在我（慢慢）打字的时候发布了他的答案:)
您有什么建议可以克服弹出窗口显示“请求的内容无法加载。请稍后再试”的情况，如果外部链接也动态处理他们的图像？
默认的内容类型是“图像”，但是，如果它是不同的，例如pdf，你应该设置data-type="iframe"。这是否是外部链接没有区别，它应该可以正常工作（只要您的网址正确并且脚本可以检测内容类型）

【解决方案2】：

您需要先阅读文档。

Read it here

对于 v3

$().fancybox({
  selector : 'a.should-popout',
  loop     : true
});

对于旧版本

Read it here in api method

$(document).on('click','a.should-popout',function(event){
    $.fancybox.close(true);
    $.fancybox.open($(this));
});

【讨论】：

谢谢 .. 成功了.. +1 我使用的是 fancybox 版本 3 并遵循旧版本的文档。