JQuery: How to unbind a specific event handler

Question

Code:

$('#Inputfield').keyup(function(e)
        {
            if(e.which == 13)
            {
                functionXyz();
            }
            else
            {
                functionZyx();
            }
    });  


$(document).keyup(function(exit) {
              if (exit.keyCode == 27) { functionZzy(); }
});

Question: How to remove the keyup event handler of keyCode == 27 and keep the other $(document).keyup event handlers intact?

Answer 1

You have to use a named function so you can reference that specific handler when calling .unbind(), like this:

function keyUpFunc(e) {
  if (e.keyCode == 27) { functionZzy(); }
}
$(document).keyup(keyUpFunc);

Then later when unbinding:

$(document).unbind("keyup", keyUpFunc);

Answer 2

jQuery allows you to bind events that will be unbound after their first invocation. If you are looking to only run this keyup function once, look at the .one() method listed here: http://api.jquery.com/one/

$(document).one('keyup', function(e) {
              if (e.keyCode == 27) { functionZzy(); }
});

Answer 3

If you only have one handler on an element, you can safely unbind it using unbind without using named functions as Nick Craver suggests. In this case, calling

$('#Inputfield').unbind('keyup');

will not affect the handler on document.

Answer 4

Your are attaching the event handlers to different elements, so you can safely remove the handler from the specific object (already mentioned I know).

For the sake of completeness, if you want to attach multiple handlers for the same event to the same object, you can use namespaced events:

$('#Inputfield').bind('keyup.keep', function(e){/*...*/});
$('#Inputfield').bind('keyup.notkeep', function(e){/*...*/});

$('#Inputfield').unbind('keyup.notkeep');
// or event  $('#Inputfield').unbind('.notkeep');