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?

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
MeProtozoan
  • 1,027
  • 3
  • 14
  • 26

4 Answers4

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);
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
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.

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
  • 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! – calumbrodie Nov 30 '10 at 10:06
  • 1
    this was pretty useful - new thing to me - namespaces - thanks! – foxybagga Jan 05 '12 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 Dec 11 '12 at 21:47
  • definitely best answer – Nicolas Mariano Obregon Oct 05 '18 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. – user3727561 Jan 19 '23 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(); }
});
Dan D.
  • 1,117
  • 1
  • 11
  • 18
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.

lonesomeday
  • 233,373
  • 50
  • 316
  • 318