Scroll binding issue in jquery

I have a <div> tag with id page after an ajax call the div tag is filled with 'n' number of <li> elements. When I scroll to the end of the div (#page) I need to add more <li> I can't do with following code. Can it be done with delegation?

My co开发者_StackOverflowde:

$(document).ready(function(){
    $("#page").bind("scroll",function(e){
            if($(this)[0].scrollHeight - $(this).scrollTop() < $(this).outerHeight())
            { 
               //End of scroll ;ajax data places here
            }
    });
});

Why can't you do it with that code? As I understand it, you want to bind to the scroll. What I see that might be an issue is that you are binding scroll on your div. Is your div set with overflow:scroll?

If it is (or if you change your bound so that you use the window and do a different calculation), you should be able to do:

$(document).ready(function(){
    $("#page").bind("scroll",function(e){
            if($(this)[0].scrollHeight - $(this).scrollTop() < $(this).outerHeight())
            { 
               $(this).append("<li></li><li></li><li></li><li></li>");
            }
    });
});

Or if you are calling to get data from the server at that point:

$(document).ready(function(){
    $("#page").bind("scroll",function(e){
            if($(this)[0].scrollHeight - $(this).scrollTop() < $(this).outerHeight())
            { 
               $.ajax({
                   url: url
                   context: this, // used so that in success this is your div
                   dataType:html,
                   success: function(data) {
                      $(this).append(data);
                   }
               });
            }
    });
});

The key here is making sure you are binding scroll to an element it can be bound to.