Fancybox无法在动态添加的外部链接上工作

Question

我有一个项目列表，如下所示

<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属性带来的花式盒弹出效果。

但是，在单击它时，只需重定向到外部URL即可。我的花式盒选项如下

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

设置中的错误是什么。

Answer 1

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

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

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

Answer 2

您需要先阅读文档。

在这里阅读

v3

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

对于较旧版本

在API方法中阅读它

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