jQuery not reacting to focus

Go To StackoverFlow.com


$('#navbar ul').addClass('hidden');
   $('#navbar li a').on('focus hover', function(){

I've posted a JSFiddle of this at: http://jsfiddle.net/karlgroves/HUKUf/

Using the code above I want the submenu items to respond on both focus and hover, however it is not working when focused. Interestingly, the CSS :focus pseudo-class works fine.

EDIT: I say "the CSS :focus pseudo-class works fine" - what I mean to say is that the :focus pseudo class works fine to change the CSS properties, however no method (including using :focus in the selector) does what I intend, which is to show the sub menu items.

Using .focus() doesn't work, either.

2012-04-04 18:28
by Karl Groves
I am not sure what is not working... - Neal 2012-04-04 18:31
why you need focus here - safarov 2012-04-04 18:31
also not sure what the problem is. I even modified your fiddle to .on('focus', function()...) and it worked fine without hover. FF 12 anyway. - KP. 2012-04-04 18:35
What do you want to achieve with Javascript (jQuery) - Roko C. Buljan 2012-04-04 18:35
@KP. remove the complete JS and will still work : - Roko C. Buljan 2012-04-04 18:35
What does respond mean in the context of your question? What exactly isn't working - KP. 2012-04-04 18:36
@RokoC.Buljan ah yes you're right. - KP. 2012-04-04 18:37
What I am expecting is that when I tab to one of the links using the keyboard, the submenus will appear the same exact way that they appear when you mouse over them - Karl Groves 2012-04-04 23:13


Correct me if I'm wrong, but I don't remember being able to throw 2 events in via space delimitation in the .on function.

According to the documentation, you should be able to attach multiple events like so:

<script type="text/javascript">
$('#navbar li a').on(
  focus: function(){
  hover: function(){

Somewhat repetitive; but it works.

2012-04-04 18:36
by Jarrett Barnett
it IS possible like he did: ".on( events-map [, selector] [, data] ) events-map A map in which the string keys represent one or more space-separated [...] - binarious 2012-04-04 18:38
and... how does your script changes anything? http://jsfiddle.net/HUKUf/10 - Roko C. Buljan 2012-04-04 18:43


I believe the code is working, just not how you expect.

    $('#navbar ul').addClass('hidden');
   $('#navbar li a').on('focus hover', function(){

When I inserted an alert, it fired twice each time I hovered a child. The fact that it fires twice tells me it is created two distinct functions.

2012-04-04 18:38
by Duane
I tried the exact same thing and it caused a continuous stream of alerts until I forced it to stop....which makes sense since the alert dialog is gaining focus till you hit OK..and then the last element gains focus again - Bradley Mountford 2012-04-04 18:44


Does not actually seem to be a problem with the event firing...looks more like an issue with traversing the DOM via your selector.

I have forked your fiddle (wow..that just sounds wrong) and you can see the event fires just fine for each focus and hover event if you are grabbing an static element by ID. So it looks like the $(this).siblings('ul') selector just isn't behaving as expected with the focus event. I would look to see what the event.target and event.currentTarget are.


OK...I am re-assessing my former statement. I have changed your code to this:

$('#navbar li a').on('focusin focusout mouseover mouseout', function(event) {
    if (event.type == 'focusin' || event.type == 'mouseover') {
    else {

and it works fine...so I really think that the issue was just a complex set of interactions between the hover and focus events. Add to that the fact that you have CSS to mimic the hover javascript event (#navbar li:hover ul {display: block;}) and you get even more potential clashes. My updated version of your fiddle is here.

2012-04-04 18:51
by Bradley Mountford