我有一个包含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加载的图片。有人可以帮我解决这个问题吗?
答案 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