Removing events in jquery

Question

Hello,

I have some code in jquery which looks like this:

$("#filterZaal").attr("disabled", "disabled");
$("#filterGenre").attr("disabled", "disabled");
$("#filterZaal").live("change", interceptZaalFilter);
$("#filterDag").live("change", interceptDagFilter);
$("#filterGenre").live("change", interceptGenreFilter);

Now, i have added a button, and when i push this button i would like that all of the above code does not count anymore, so when i push the button, these events would no longer be called but when i push it again it should become enabled again.

How can i do this in jquery?

Answer 1

You'll want to use die():

$("#filterZaal").die("change", interceptZaalFilter);
$("#filterDag").die("change", interceptDagFilter);
$("#filterGenre").die("change", interceptGenreFilter);

Answer 2

Rather than add/remove the events each time with die(), I'd just create a toggle flag:

var Toggle = false;

$("#filterZaal").live("change", function(){ 
  if(Toggle){ interceptZaalFilter(); }   // alterantively, add this check
  Toggle = !Toggle;                      // to the func you call
});
// and so on

This seems to better capture what you want, and will almost certainly be more efficient.

Answer 3

have the event handlers check if $('#theButton').hasClass('disabled') and if so, they do $('#theButton').removeClass('disabled') and return false; else proceed normally

then when you add the button make sure it has a 'disabled' class