JQUERY live with AJAX
I want to use AJAX with .live() so i can make things neat. I wan to know how it is done, I have provided a basic function: on a button click a tag is placed in a . But i need to use live() in order to use a lightbox on that image.
$(document).ready(function()
{
$("button").click(function()
{
$("div").load('test1.txt')
});
});
LIGHTBOX:
$(function()
{
$('#gallery a').lightBox();
});
CSS:
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery
{
background-color: #444;
padding: 10px;
width: 520px;
}
#gallery ul
{
list-style: none;
}
#gallery ul li
{
display: inline;
}
#gallery ul img
{
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img
{
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover
{
color: #fff;
}
</style>
USAGE: div tag with id=gallery
HTML:
<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.lightbox-0.5.css" media="screen" />
<h2 id="example">Example</h2>
<p>Click in the image and see the <strong>jQuery lightBox plugin</strong> in action.</p>
<div id="gallery">
<ul>
<li>
<a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
<img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
</a>
</li>
</ul>
</div>
If someone can help me change the .开发者_开发知识库click() function...
Use a callback:
$(function(){
$('button').live('click', function() {
$('div').load('test1.txt', function() {
$('#gallery a').lightBox();
});
});
});
Jquery live() cannot be used on custom events, document ready or any plugin calls.
You have to call the plugin again in the ajax output for this to work properly.
精彩评论