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?

You'd probably be better off toggling a boolean value that indicates whether or not the function should be run, rather than constantly binding and unbinding event handlers. What does the code for the appName.featureName.getMorePhotos function look like? — Anthony Grist
– Anthony Grist, Commented Nov 6, 2014 at 14:03
I think you are right with the boolean than binding and unbinding... even with the answers below I couldn't get the thing to work, when I passed a bool everything works! — Mark Sandman
– Mark Sandman, Commented Nov 6, 2014 at 14:16

vmontanheiro · Accepted Answer · 2014-11-06 14:05:50Z

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);

answered Nov 6, 2014 at 14:05

vmontanheiro

1,0399 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

iCollect.it Ltd Over a year ago

Why do you have a delegated event handler, searching for itself? That will fail as #ScrollDiv does not contain a #ScrollDiv.

Markai Over a year ago

The .bind methods are rather obsolete and .on should be preferred since version 1.7 as stated in the api: api.jquery.com/bind

vmontanheiro Over a year ago

To force it ? But the version 1.7 is so obsolete to me. ;)

Remco van Dalen · Accepted Answer · 2014-11-06 14:06:17Z

1

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.

answered Nov 6, 2014 at 14:06

Remco van Dalen

3041 silver badge6 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related