开发者

Lightbox Not Working on AJAX Load Parts

I have a page with 5 pictures and a button to load more using AJAX. I am loading the rest of the pictures using this script:

<script type="text/javascript">
                        $(document).ready(function(){
                            $("#loadmorebutton").click(function (){
                                $('#loadmorebutton').html('<img src="<?php bl开发者_如何学Pythonoginfo('template_url'); ?>/img/ajax-loader.gif" />');
                                $.ajax({
                                    url: "<?php bloginfo('template_url'); ?>/includes/loadmore.php?lastid=" + $(".postitem:last").attr("id"),
                                    success: function(html){
                                        if(html){
                                            $("#wallPosts").append(html);
                                            $('#loadmorebutton').html('Load More');
                                        }else{
                                            $('#loadmorebutton').replaceWith('<center>No more posts to show.</center>');
                                        }
                                    }
                                });
                            });
                        });
                    </script>

First, 5 pictures are displayed and when a user clicks on older posts more 5 are loaded. Now my problem is that although all the pictures have the same code/class/structure, lightbox works only on the first 5 pictures, not on the one loaded by AJAX. Someone can help me with this problem?


$(document).ready(function(){
    $("#loadmorebutton").live('click', function (){
        $('#loadmorebutton').html('<img src="<?php bloginfo('template_url'); ?>/img/ajax-loader.gif" />');
        $.ajax({
            url: "<?php bloginfo('template_url'); ?>/includes/loadmore.php?lastid=" + $(".postitem:last").attr("id"),
            success: function(html){
                if(html){
                    $("#wallPosts").append(html);
                    $('#loadmorebutton').html('Load More');
                }else{
                    $('#loadmorebutton').replaceWith('<center>No more posts to show.</center>');
                }
            }
        });
    });
});

Use jQuery.Live() to attach events to objects that will be added to the page via AJAX. Otherwise the events only tie into the elements on the page when the function is called. Documentation can be found here

0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜