jQuery paging using .on() and .off() to disable events causes non-responsive UI elements

Question

I've written a custom paging scheme using jQuery 1.8.0. I'm binding event handlers to the backwards and forwards buttons. To disable the backwards button when on page 1, I'm using the .off() function to disable the binding. When I page up, I call .on() on the button to enable the binding again. The problem occurs when I change the on/off state of an event binding three times. After that, the event won't fire anymore.

A stripped down version of my code follows. This will illustrate my problem.

This is the event. The back button has the id of prevPageLink.

$("#prevPageLink").click( function() {
  // Decrement the current page
  global_currentPage--;

  // Check to see if first or last page clicked
  handlePaginationButtonState();

  // Decrement the results indicies
  startResultsIndex -= global_totalResultsPerPage;
  endResultsIndex = startResultsIndex + global_totalResultsPerPage - 1;

  getNextResults();  
});

The function handlePaginationButtonState does the work of turning on and off the back and forward buttons.

function handlePaginationButtonState() {

  if (global_currentPage == 1) {
    $("#prevPageLink").parent().attr('class', 'disabled');
    $("#prevPageLink").off('click');
  } else {
    $("#prevPageLink").parent().attr('class', 'enabled');
    $("#prevPageLink").on('click');
  }  // the rest of this function takes care of the numbered and right page buttons

So when the web app first brings results back, the first 10 results are loaded. If I do the following:

1. Page next (to page 2) - binding turned on
2. Page previous (back to page 1) - binding turned off
3. Page next (to page 2) - biding turned on

I cannot page previous, back to page 1. The prePageLink button no longer responds. I have tested this with the next page button and the end of the results list as well as the numbered page buttons. If a binding has been turned on or off using the .on() or .off() functions, it no longer responds to events.

Any ideas? I am completely baffled.

Answer 1

" If a binding has been turned on or off using the .on() or .off() functions"

$("#prevPageLink").on('click') doesn't do what you seem to think it does, in fact it doesn't do anything at all because you didn't supply enough parameters. The .on() method doesn't turn on a previously removed event handler, it binds a new event handler and so you have to supply the function that will be called when the event happens. In other words:

$("#prevPageLink").on('click', function() { /* some code */ });
/// does the same thing as:
$("#prevPageLink").click(function() { /* some code */ });

The .off() method removes a previously bound handler, it doesn't temporarily disable it.

If you want to keep re-binding the same function don't use an anonymous function:

function myClickHandler() {
    // your code here
}
$("#prevPageLink").on('click', myClickHandler);
// remove it:
$("#prevPageLink").off('click');
// add it again:
$("#prevPageLink").on('click', myClickHandler);

For more information read the .on() documentation.

But rather than removing and rebinding handlers I think it would be easier to just leave the handler in place all of the time and have it test whether or not you're already on the first page - add something like this to the beginning of the function:

if (global_currentPage === 1)
   return false;