开发者

JQUERY live with AJAX

开发者 https://www.devze.com 2023-03-17 02:58 出处:网络
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 atag is placed in a . But i need to use live() in order to

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号