Question

初始化灯箱：

<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>

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

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

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

Answer 1

对于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）

Answer 2

主题中有一个以上的帖子......

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();
});

替代 （取决于您使用的是什么Jquery版本1.7 +）

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

Answer 3

您可以使用jquery的live（）方法使所有新元素出现在页面上。你必须改变你当前的灯箱功能才能使用live（）; 可能的解决方案就是：

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

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

3 个答案: