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.

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.

• javascript
• jquery
• ajax
• events
• event-handling

• $(window).on('scroll'); what are you binding here? There is no actual handler. – Ilia G Commented Oct 5, 2012 at 21:42
• 2 They work as designed. You aren't using them correctly. – Shmiddty Commented Oct 5, 2012 at 21:45

1 Answer 1

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 pletely from the element. When you bind the event again, you have to specify the event handler:

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