Question

我正在尝试使用jquery灯箱来显示使用load（）加载到页面中的照片。我的代码是：

$('#content').on('click', 'a.thumb_link', function(){        
    $('a.thumb_link').lightBox();
    return false;
});

仅当我点击两次链接时才有效。

Answer 1

你不能做像

这样的事情

$('#content').live('click', function()
{
   $('a.thumb_link').lightBox();
   return false;
}

如果我有更多的代码作为一个例子来使用我可能能够提供更好的解决方案，但我只能抓住吸管，假设内容是什么，与类thumb_link的链接

Answer 2

这是我的完整代码：

loaded.php

<a class="thumb_link" href="../members/21000_21999/21659/21659-1.jpg">
<img src="../members/21000_21999/21659/21659-1.jpg"></a>

<a class="thumb_link" href="../members/21000_21999/21659/21659-3.jpg">
<img src="../members/21000_21999/21659/21659-3.jpg"></a>

test.php的

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css"        media="screen" />
<script src="js/jquery.js"></script>
<script src="js/jquery.lightbox-0.5.js"></script>

<body>
<a class="link" href="../members/21000_21999/21659/21659-1.jpg">
<img src="../members/21000_21999/21659/21659-1.jpg">
</a>

<a class="link" href="../members/21000_21999/21659/21659-3.jpg">
<img src="../members/21000_21999/21659/21659-3.jpg">
</a>

<div id="content"></div>
<script>
$(document).ready(function(){

    $('a.link').lightBox();

    $('#content').load('loaded.php');

    $('#content').on('click', 'a.thumb_link', function(){        
        $('a.thumb_link').lightBox();
        return false;
    }); 


});
</script>
</body>
</html>

直接在test.php中编码的前2个图像只需单击图像即可运行lightBox。底部2个加载的图像只在我点击两次时运行lightBox。

或者，如果我首先单击顶部图像然后单击加载的图像（仍然是两次单击），则加载的图像将运行lightBox

我正在使用： jquery v1.7.1 jquery lightBox v0.5

Answer 3

我很困惑，为什么2提供的答案不起作用？

最后，我设法通过在加载的页面中包含我的JS来使其工作，以便将脚本与其他内容一起加载到页面中。

这就是诀窍：

$('a.thumb_link').lightBox();

如何从加载的内容中调用jquery lightBox

3 个答案: