Lightbox不适用于AJAX加载部件

时间:2011-10-04 18:56:10

标签: javascript jquery ajax

我有一个包含5张图片的页面和一个使用AJAX加载更多的按钮。我正在使用此脚本加载其余图片:

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

首先,显示5张图片,当用户点击旧帖子时,会加载更多5张图片。现在我的问题是,尽管所有图片都具有相同的代码/类/结构,但灯箱仅适用于前5张图片,而不适用于AJAX加载的图片。有人可以帮我解决这个问题吗?

1 个答案:

答案 0 :(得分: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>');
                }
            }
        });
    });
});

使用jQuery.Live()将事件附加到将通过AJAX添加到页面的对象。否则,事件仅在调用函数时绑定到页面上的元素。可以找到文档here