Ajax requests to load content while scrolling page

ajax, jquery

Solution

1) I've made a similar piece of code a few days ago. Here I assign the page scrolling event to a function which checks how much pixels the user is away from the bottom. If the user has 300 or less pixels less the loadMoreArticles() function is triggered:

$(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());
        }
    });

The console.log() functions shows you it's implemented in the right way

2) You can add the functionalities again after you've appended the new content. Like this:

$(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;
                }
            });
        }
    });
  } 
});

Problem

I have tried and searched but didn't find... How can I change the following method that I wrote to work with the on() method? ``` //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); } }); } }); ``` Thanks in advance! Dennis UPDATE 1 I changed the code to the following, but then things that are created on the fly don't have functionality - am I missing some static reference? ``` $(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 On the fly created elements miss the following functionality: ``` $('#postsDiv').on('keydown', '.commenttext', function(e) { if ((e.which == 13) && !e.shiftKey) { comment($(this)); return false; } }); ``` The method comment() looks as follows: ``` //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(); } } ``` The comment gets appended to the newly loaded content but apparently missed the ajax as when I reload the page it is not there anymore.

Original source