灯箱不工作在AJAX加载部分

Question

我有一个页面有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加载的一个。有人可以帮我解决这个问题吗？

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

使用jQuery.Live（）事件附加到将通过AJAX添加到页面对象。否则，事件仅在调用该函数时绑定到页面上的元素。文档可以发现here