Ajax请求在滚动页面时加载内容

Question

我试过并搜索过，但没有找到...如何更改我编写的使用on（）方法的以下方法？

//Get old posts when scrolling down 
$(window).scroll(function(){ 
    if($(window).scrollTop()==($(document).height()-$(window).height())){ 
    //Get older posts 
    $.ajax({ 
     type: 'POST', 
     url: 'action/getoldposts.php', 
     success: function(oldposts){ 
      //Append #postsDiv 
      $('#postsDiv').append(oldposts); 
     } 
    }); 
    } 
}); 

在此先感谢！

丹尼斯

更新1

我改变了代码以下，但随后被动态创建不具备的功能的东西 - 我失去了一些静态的参考？

$(window).on('scroll',function(){ 
    if($(window).scrollTop()==($(document).height()-$(window).height())){ 
    //Get older posts 
    $.ajax({ 
     type: 'POST', 
     url: 'action/getoldposts.php', 
     success: function(oldposts){ 
      //Append #postsDiv 
      $('#postsDiv').append(oldposts); 
     } 
    }); 
    } 
}); 

UPDATE 2

动态创建元素错过了以下功能：

$('#postsDiv').on('keydown', '.commenttext', function(e) { 
    if ((e.which == 13) && !e.shiftKey) { 
     comment($(this)); 
     return false; 
    } 
}); 

方法评论（）如下所示：

//Function to comment on a post 
function comment(commenttext) 
{ 
//Get postid 
var commenttextid=commenttext.attr('id'); 
var postid=commenttextid.replace("commenttext", ""); 

//Get commenttext 
var commenttext=$('#commenttext'+postid).val(); 

//Ajax of commenttext is not empty 
if(commenttext!="") 
{ 
    $.ajax({ 
     type: 'POST', 
     url: 'action/comment.php', 
     data: 'commenttext='+commenttext+'&postid='+postid, 
     success: function(data){ 

      //Prepend comments 
      $('#comments'+postid).hide().prepend(
       '<div class="comment"><hr/>'+commenttext.replace(/\n/g, '<br/>')+'</div' 
      ).fadeIn('slow'); 

      //Remove from textarea what was typed in 
      $('#commenttext'+postid).val(''); 

      //Focus on textarea 
      $('#commenttext'+postid).focus(); 
     } 
    }).error(function(){ 
     alert('The comment could not be sent - please try again later.'); 
    }); 
} 
else 
{ 
    //If the commenttext is empty, focus on the textarea nonetheless 
    $('#commenttext'+postid).focus(); 
} 
} 

注释被所附到新加载的内容，但显然错过了Ajax，因为当我重新加载页面它不是那里了。

Answer 1

1）我做了一个类似的一段代码前几天。在这里，我将页面滚动事件分配给一个函数，该函数检查用户离底部有多少像素。如果用户有300点或更少的像素以内loadMoreArticles（）函数被触发：

$(document).scroll(function(){ 
     if(($(document).height()-$(window).height()-$(document).scrollTop()) < 300){ 
      console.log('Scrolled to bottom'); 
      ArticleList.loadMoreArticles(); 
     } else { 
      console.log('Scroll '+$(document).height()+' - '+$(window).height()+' - ' +$(document).scrollTop()); 
     } 
    }); 

的执行console.log（）函数显示了它在正确的道路

2）您可以添加的功能实现再次添加新内容后再次显示。就像这样：

$(window).on('scroll',function(){ 
    if($(window).scrollTop()==($(document).height()-$(window).height())){ 
    //Get older posts 
    $.ajax({ 
     type: 'POST', 
     url: 'action/getoldposts.php', 
     success: function(oldposts){ 
      //Append #postsDiv 
      $('#postsDiv').append(oldposts); 
      //Remove all functionalities 
      $('#postsDiv').off('keydown'); 
      //Add all functionalities again 
      $('#postsDiv').on('keydown', '.commenttext', function(e) { 
       if ((e.which == 13) && !e.shiftKey) { 
        comment($(this)); 
        return false; 
       } 
      }); 
     } 
    }); 
    } 
}); 

Answer 2

$(window).on('scroll', function(){ 
// ... 
});