How to call jquery lightBox from loaded content

StackOverflow https://stackoverflow.com/questions/11832876

  •  24-06-2021
  •  | 
  •  

题

I'm trying to use jquery lightbox to display photos that are loaded into a page using load(). My code is:

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

This works only if I click the link twice.

有帮助吗？

解决方案 3

I'm baffled, why the 2 provided answers didn't work?

At the end, I managed to get it working by including my JS inside the loaded page, so that the script was loaded into the page along with the other content.

This did the trick:

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

其他提示

Can't you do something like

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

If I had more code as an example to work with I might be able to provide a better solution but I can only grab at straws assuming what content is, to the link with the class thumb_link

Here's my complete code:

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>

The top 2 images which are coded directly in test.php will run lightBox with a single click on the image. The bottom 2 loaded images only run lightBox when I click them twice.

Or, the loaded images will run lightBox if I first click a top image and then click the loaded image (still two clicks)

Im using: jquery v1.7.1 jquery lightBox v0.5

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top