Question

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 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>');
                                        }
                                    }
                                });
                            });
                        });
                    </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?

Answer 1

$(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