Fancybox 不会在 $(elem).click() 上触发，但会在“真实”点击时触发？

Posted 2023-05-09

【中文标题】Fancybox 不会在 $(elem).click() 上触发，但会在“真实”点击时触发？

【英文标题】：Fancybox doesn't trigger on $(elem).click(), but does on "real" click?

【发布时间】：2013-01-09 07:22:53

【问题描述】：

我无法触发fancybox。我将其设置为在您单击元素时触发。我仍然不知道为什么，但由于某种原因，fancybox 只有在我使用live() 绑定它时才有效，有点像这样：

$(document).ready(function() 
    // This works
    $('.fancybox').live('mousedown', function() 
        $(this).fancybox();
    );

    // This doesn't
    $('.fancybox').fancybox();
);

在此处阅读更多相关信息： Fancybox is loaded, but nothing happens, and no errors?

问题是，它只有在我实际单击元素时才有效。如果我尝试使用以下方式触发点击：

$('.fancybox').trigger('mousedown');

我什么也得不到！它只是不起作用。

我需要这样做的原因是因为图像是在画廊中使用 php 打印出来的（带有缩略图等）。我只想要一个可用画廊的下拉菜单，所以在页面加载时，我隐藏所有缩略图，然后循环浏览它们并创建一个包含所有画廊的下拉菜单。到目前为止，一切都很好！如果我使用检查器（使用 chrome）显示元素，然后手动单击它，它工作正常！虽然，问题是，当我尝试使用下拉菜单触发点击时，什么也没有发生！

我已将其设置为下拉列表中的每个<option> 都有一个画廊/缩略图 ID 的数据属性，并且当下拉列表更改时（当您选择一个选项时），它会自动找到正确的图像并触发点击 - 这反过来应该打开一个花式框。我知道它会找到正确的图像，然后单击它，只是单击时没有任何反应。

试试吧！

网址：http://goo.gl/r4Klf

右键单击内容中的第一个下拉菜单，然后检查它。在它上面，你会看到一堆.ngg-galleryoverview 元素。单击其中一个并删除应用于元素的所有样式（在 element.style 中，样式基本上隐藏了元素）。然后展开该元素，您将在其中看到一个.ngg-gallery-thumbnail。从样式中删除 display: none。您现在应该能够在页面上看到该元素。如果您尝试单击它，fancybox 将打开。但是，如果您尝试使用$(the element).trigger('mousedown') 单击它，它将无法正常工作。尝试使用 href 属性定位它，例如：

jQuery('a[href="http://hallarna.se/wp-content/gallery/2013/spoksonatenloggaliten.jpg"]').trigger('mousedown');

请注意，jQuery 处于 noConflict 模式，这意味着您必须使用 jQuery() 而不是 $()。

我已经为此奋斗了好几天了。任何想法都非常感谢！

【问题讨论】：

不知道这是否有帮助，但是 jQuery('#ngg-image-207 a').trigger('click');作品

【参考方案1】：

我想我明白问题出在哪里了。当您触发 mousedown 时，它只会在您单击时触发插件以使用指定的元素；它实际上不应该显示任何内容...直到您单击它或触发单击。

试试类似的东西

jQuery('a[href="http://hallarna.se/wp-content/gallery/2013/spoksonatenloggaliten.jpg"]').trigger('mousedown').trigger('click');

虽然我会寻找一种解决方案来使fancybox按预期工作，使用 $('.fancybox').fancybox();

【讨论】：

嗯，这很有趣。尽管它似乎可以在控制台上运行，但我仍然很难让它从我的脚本中运行。我会看看我是否可以让它工作，或者我可能只是使用fancybox的替代品。感谢您的帮助！

仅供参考，我最终切换到了完美实现的彩盒。虽然有一些缺点，它没有响应，而且它没有像 fancybox 那么多的选项 - 但至少它可以工作。我会将您的答案标记为已接受，因为您确实指出了它为什么不起作用。谢谢！

@qwerty ：我认为问题不在于fancybox，而是您尝试使用它的方式。您似乎对实施感到困惑。这个$('.fancybox').fancybox(); 不会（也永远不会）触发fancybox ...它只是将fancybox 绑定到选择器.fancybox，但仍然需要单击选择器来触发它...您可以完成$('.fancybox').fancybox().trigger('click') 到在任何情况下都强制click 不带live。

是的，我很清楚这一点！请阅读以下问题（也从 OP 链接），您就会明白为什么我无法正常绑定它。而且，因为我使用了上面必须使用的方法（将其绑定到 mousedown 和 live），所以有时我必须单击它两次才能工作。无论哪种方式，问题不在于我如何实现它，而在于它没有正确绑定。这是一个小代码笔，展示了我如何尝试绑定它（正确的方法）但没有成功：codepen.io/anon/pen/Jotmn（取自另一个链接）