在 jQuery 附加的元素上触发 Fancybox答案

【问题标题】：Firing Fancybox on element which is appended by jQuery在 jQuery 附加的元素上触发 Fancybox
【发布时间】：2013-02-27 23:25:19
【问题描述】：

我试图在我用 jQuery 附加的元素上触发 Fancybox，但没有成功。

这里是 Fancybox 触发代码：

jQuery(document).ready(function() {
    $("a#what_is_prehung").fancybox();
    $("a.prehungHelp").fancybox();
});

使用此代码，我将附加 html 标记：

jQuery(document).ready(function($) {
     $('.valueDoorSlabonly').append('<div id="prehungHelp"><a class="prehungHelp" href="/template/images/door-slab-only.jpg"></a></div>');
});

我需要在具有 class="prehungHelp" 的元素上触发 Fancybox。在我们的网站上，我们使用的是 jQuery v1.6.4，由于其他脚本仅使用此版本，因此无法对其进行更新。

http://www.doorsandbeyond.com/avanti-modern-interior-door-black-apricot/ 这是它应该出现的页面，在“* Pre-hanging:”部分中带有门选项的表单中，单选按钮应该是“？”标记出现与描述此选项的模式窗口（fancybox）的链接。

我已经从多个资源中尝试了这个答案和其他一些答案，但没有成功： how to bind fancybox to dynamic added element? Appending dynamically generated html using jQuery does not play well with Fancybox

我将不胜感激。谢谢谢里夫

【问题讨论】：

您是否只将 a.pregungHelp 元素附加到 DOM 一次？您确定在调用您的 fancybox 设置代码之前已附加它们吗？
顺便说一句，在使用 ID 时无需在标签前面加上选择器 - 无论如何它们都应该是唯一的。
是的，它们已附加并出现在页面上，但 Fancybox 不包含链接。它只是在新窗口中打开图像。

标签： jquery fancybox append

【解决方案1】：

在你用 jQuery 附加 "prehungHelp" 元素后尝试调用 fancybox

jQuery(document).ready(function($) {
    $('.valueDoorSlabonly').append('<div id="prehungHelp"><a class="prehungHelp" href="/template/images/door-slab-only.jpg"></a></div>');
    $("a.prehungHelp").fancybox();
});

【讨论】：

Ooo )) 它有效！就这么简单。太感谢了！我真的很感激。我根本没想到在 append 之后调用它。
如果它有效，我很高兴。如果您觉得我的答案有用，请记得给我的答案投票。