CODEWITHSUNDEEP
javascriptjqueryajaxeventsevent-handling
Joel Joel Binks
Joel Joel Binks

Reputation: 1666

JQuery .on() and .off() don't work the way I'm using them

I have a page where I trigger an ajax load event when the user scrolls down to a certain portion of the page. I have the following ajax event handlers here:

$(document).ajaxStart(function() {
$('#loader').show();
$(window).off('scroll');
    }); 

$(document).ajaxComplete(function() {
    $('#loader').hide();
  $(window).on('scroll');
    });

To prevent the ajax event from firing multiple times I turn off the scroll event handler at the beginning of an ajax call (I also wrote a delay function which will wait a few milliseconds before firing as well). My intention is to rebind the scroll after ajax is finished. I know these events are occurring because my #loader div is loading and unloading as designed. Unfortunately, the scroll never re-binds, it remains off and I cannot understand why. Hence, I load a single ajax page of new content then it stops working.

Upvotes: 2

Views: 3883

Answers (1)

Guffa
Guffa

Reputation: 700252

The names "on" and "off" may be confusing; you can't use them to switch events on and off.

The off method removes the event handler completely from the element. When you bind the event again, you have to specify the event handler:

$(window).on('scroll', handlerFunction);

Upvotes: 6

Related Questions