为什么我的 fancybox 在 $('.selector').click() 上打不开？

Question

我有一个样式为 link 的页面，我使用 jQuery 将其分成多个部分。

使用 jQuery .internal 会使页面导航到 div 用户内部 link 的 href 属性指定的指定目标点击。
.external 与 .internal 的功能相同，只是它在新选项卡中打开。
.video 应该简单地导致 div 单击以在 fancybox 中播放 link 指定的视频，但事实并非如此。也不在控制台报错。

这是我的 fancybox 代码：

HTML

<div id="fentanylVid" class="col-sm-3 dept video" data-department="fentanyl the real deal">
    <div class="box listed-left animated-content move_right animate clearfix">
        <div class="box-text">
            <h4><a data-fancybox="" href="https://youtu.be/Tt0dFCuwkfQ?rel=0">Fentanyl: The Real Deal (Video)</a></h4>
        </div>
    </div>
</div>

jQuery

$('.video').click(function(){
    $().fancybox({
        selector : '.video'
    });
});

我的页面 header 中也有这两个资源

Answer 1

您可以像这样初始化 fancybox

$('.video').fancybox({
    selector : '.video'
});

或者如@Taplar所说

$('.video').click(function(){
    $.fancybox.open(this)
});

Answer 2

稍微解释一下您的代码的作用：

$('.video').click(function(){ // <- Here you are attaching your click event on selected items
    // So, when user clicks, this happens:
    $().fancybox({ // Here you are telling fancybox to attach click event ..
        selector : '.video'  // .. on this selector
    });
});

所以，基本上你已经做了太多的工作，你所要做的就是删除你自己的点击事件，它应该可以正常工作。或者您可以使用 API 以编程方式启动 fancybox，就像在其他答案中一样。

为什么我的 fancybox 在 $('.selector').click() 上打不开？

Why does my fancybox not open on $('.selector').click()?

javascript

jquery

fancybox-3