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?

Turoff

Why are you naming the event object "exit"? – Grouty

The keyCode==27 is the one that is attached to $(document).keyup... please clarify. – Belligerent

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);

Antonetteantoni

Answer 2

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');

---

Since jQuery 1.7, the methods .on and .off are the preferred way to add and remove event handlers. For this purpose they behave exactly like .bind and .unbind and also work with namespaced events.

Belligerent

This is the best answer here, the concept of namespacing is really useful and I use it all the time. It provides support if you (or more importantly someone else) adds event binding to the same element at a later date without realising it already has events bound to it. Of course if they go and use a $('#myelement').unbind('focus'), type hammer without namespacing your events are going to be unbound anyway... Hence tell the people you work with to start using it! – Swabber

this was pretty useful - new thing to me - namespaces - thanks! – Eringo

While namespacing can be useful, the ability to target a specific instance of a function that's been bound may be more useful. I have several instances of the same function bound to my document and I want to destroy just one of them. Namespacing doesn't help me with that. – Cyprian

definitely best answer – Osteopathy

This is awesome! I was trying to bind an event in one function and unbind it in another callback but because of the different scopes I wasn't able to access the function that I was trying to unbind. By being able to namespace events you can disable them without needing the actual function itself. You learn something new every day. – Interpellation

Answer 3

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(); }
});

Polycotyledon

Answer 4

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.

Alexandretta