Question

I’m listening for keypress events on an input field with delegation. For some reason, Firefox doesn’t trigger the delegated event for cursor UP when at the start of the field, or cursor DOWN when at the end. LEFT and RIGHT work as expected all the time.

Directly binding an event listener to the field works fine, so it has to be something to do with delegation. Does anyone know if this is a know issue, I couldn’t find anything on Google/forums etc..?

$("div").delegate(":input", "keypress", function(e){
  // doesn't get triggered
});

$("div :input").bind("keypress", function(e){
  // gets triggered fine
});

Here’s a demo which shows the issue – http://livsey.org/jquery.delegation.html

Answer 1

These keys don’t bubble in Firefox, at least not in that case, so .delegate() or .live() won’t work. This is a known issue, better to use a different event in this case, like keydown or keyup, you can see the jQuery documentation for .keypress() for a quick blurb about this:

Note that keydown and keyup provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase “a” will be reported as 65 by keydown and keyup, but as 97 by keypress. An uppercase “A” is reported as 65 by all events. Because of this distinction, when catching special keystrokes such as arrow keys, .keydown() or .keyup() is a better choice.

Updating your code to this works:

$("div")().delegate(":input", "keyup", function(e){
  log("delegated: "+e.keyCode);
});

$("div :input").bind("keyup", function(e){
  log("bound: "+e.keyCode);
});