Remove and Add scroll event handler using jQuery .off or .unbind

Question

I am writing my own image Lazy Loading function that when a div is scrolled to its bottom we load some new images, the height of the container div ( #ScrollDiv in this case) is increased and when we scroll to the bottom again we make the same call. This is fine although I pass a 'pagination ID' with each request for more images (this is called appName.featureName.PaginationConstant and in a parent scope) and I want to remove or freeze the scroll event so we don't make other requests or increment the pagination ID. For example:

appName.featureName.lazyLoader = function() {

    var currentScroll = $(this).scrollTop(),
        divHeight = $(this)[0].scrollHeight,
        actualHeight = $(this).height() + parseInt($(this).css('padding-bottom'))

    // have we hit the bottom of the Scroll Div?
    if((divHeight - actualHeight) <= currentScroll ) {
        // yes we have, remove the scroll, see I name this function below
        $('#ScrollDiv').off('scroll', appName.featureName.lazyLoader);
        // Now get more photos, in the function below I shall re-bind the scroll functionality
        appName.featureName.getMorePhotos(++appName.featureName.PaginationConstant);
    }

};

// this is the lazyload funtion
appName.featureName.lazyLoad = function () {
    $('#ScrollDiv').on('scroll', appName.featureName.lazyLoader);
}; 

Everything works great apart from the unbinding! I am still able to fire the scroll event handler despite the fact I have tried to remove it once my condition is met with $('#ScrollDiv').off('scroll', appName.featureName.lazyLoader);

What am I doing wrong?

Answer 1

Have you ever tried like this?

$('#ScrollDiv').on('scroll','#ScrollDiv', appName.featureName.lazyLoader);

and

$('#ScrollDiv').off('scroll','#ScrollDiv', appName.featureName.lazyLoader);

or you can use the method bind too

$('#ScrollDiv').bind('scroll', appName.featureName.lazyLoader);

and

$('#ScrollDiv').unbind('scroll', appName.featureName.lazyLoader);

Answer 2

jQuery's .off() function doesn't work that way. If you wanna add and remove only your own scroll handler and leave other 3rd party scroll handlers alone, you want to use

$("#scrollDiv").on("scroll.appName", appName.featureName.lazyLoader);

and to remove all of your own handlers:

$("#scrollDiv").off(".appName");

or, to only remove your own scroll handler, but leave a click handler alone:

$("#scrollDiv").off("scroll.appName");

See the documentation at http://api.jquery.com/off/ for more information.