为什么我的fancybox 没有在$('.selector').click() 上打开？答案

【问题标题】：Why does my fancybox not open on $('.selector').click()?为什么我的fancybox 没有在$('.selector').click() 上打开？
【发布时间】：2020-02-02 21:57:56
【问题描述】：

我有一个样式链接页面，我使用 jQuery 将其分成多个部分。

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

这是我的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'
    });
});

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

【问题讨论】：

经过fancyapps.com/fancybox/3/docs/#api，打开fancybox的API命令似乎是$.fancybox.open
这更近了一步。它确实会在单击 div 时打开 fancybox，但它不会播放 div 内的链接指定的视频。

标签： javascript jquery fancybox-3

【解决方案1】：

你可以像这样初始化fancybox

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

或者正如@Taplar所说的

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

【讨论】：

我使用@Taplar 建议的一个版本让它工作。我可以编辑你的答案来显示它吗？

【解决方案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，就像在另一个答案中一样。

【讨论】：