加载新图像后灯箱无法正常工作答案

【问题标题】：Lightbox not working after new images load加载新图像后灯箱无法正常工作
【发布时间】：2013-04-11 03:18:35
【问题描述】：

初始化灯箱：

<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/slimbox2.js"></script>

我在页面上有静态图片：

<a class="itogdetimg" href="" rel="lightbox" title="">
    <img width="83px" src="/img.png" border="0"/>
</a>

我有链接 id="knav1" 点击这个用 jquery 脚本加载新图片：

$("#knav1").click(function(){
        $("#navldesc").load('/api.php?nvl=y&komplektn=Комплит2');
});

链接类型与上述相同，但带有它们的灯箱不再有效。我认为这是因为页面上最初没有它们。我该如何解决这个问题？

【问题讨论】：

您提供的代码中缺少初始化灯箱的部分。但问题可能是因为像$("[rel='lightbox']").lightbox() 这样的jquery 选择器仅适用于您调用选择器时dom 中的元素。所以你需要将灯箱应用到新添加的元素上，并带有加载成功回调（但如何正确执行取决于你使用的灯箱插件）。

标签： jquery image lightbox

【解决方案1】：

主题中的帖子不止一篇...

Dynamic Links and jQuery Lightbox issue : Loading image in lightbox...completely stumped!

Lightbox Not Working on AJAX Load Parts

activate lightbox on dynamically added content

答案很简单

改为：

$("selector").live('click', function (){
      $(this).lightBox();
});

Alt （取决于您使用的 Jquery 版本 1.7+）

$("selector").on('click', function (){
      $(this).lightBox();
});

【讨论】：

live 自 1.7 起已弃用，应提及。
@t.niese 更新了以后版本的替代方案 =)
但不正确;) 相当于$("#knav1").live('click', ... 是$(document).on('click', '#knav1', ... 但无论如何我不认为#knav1 被另一个具有相同ID 的链接取代，问题更多的是灯箱的点击处理程序未附加。

【解决方案2】：

您可以使用 jquery 的 live() 方法来使页面上出现的所有新元素正常工作。您必须更改当前的灯箱功能才能使用 live(); 可能的解决方案是这样的：

$("a.itogdetimg").live("click", function(){ $(this).lightbox(); });

【讨论】：

【解决方案3】：

对于 slimbox2 这应该可以工作：

$("#knav1").click(function(){
        $("#navldesc").load('/api.php?nvl=y&komplektn=Комплит2',function() {
             $("#navldesc").find("[rel='lightbox']").slimbox(/*if you have custom options place them here*/);
        });
});

正如我最初的评论所提到的，问题是 slimbox2 不关心由 ajax 添加的图像。所以你需要自己将slimbox应用于新添加的图像。

但据我所知，slimbox2 很长时间没有更新，所以它可能与较新版本的 jquery 不兼容。我建议你考虑一个替代方案。我有一个自己的 ui 框架，所以我真的可以很好地推荐什么库更好。（这些看起来像是最新的：fancybox2 lightbox2）

【讨论】：

fancybox 的动态内容也很烂