47

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?

2
  • 7
    Why are you naming the event object "exit"? Commented Oct 19, 2010 at 21:29
  • The keyCode==27 is the one that is attached to $(document).keyup... please clarify. Commented Oct 19, 2010 at 21:43

4 Answers 4

81

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

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.

5
  • 13
    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! Commented Nov 30, 2010 at 10:06
  • 1
    this was pretty useful - new thing to me - namespaces - thanks!
    – foxybagga
    Commented Jan 5, 2012 at 11:16
  • 2
    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.
    – Frug
    Commented Dec 11, 2012 at 21:47
  • definitely best answer Commented Oct 5, 2018 at 12:06
  • 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. Commented Jan 19, 2023 at 12:16
9

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

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.