jquery .live 'focus' event not being triggered on google chrome

Question

I wonder is this a bug in chrome or jQuery, or am I misunderstanding the usage of the .live function

$('.input_form input[type="radio"]').live({
    'change':function(){
        console.log("this is a radio button");
    }
});

The above code sends output to the console window when I click on a radio button with class 'input_form' in all major browsers

however the following code:

$('.input_form input[type="radio"]').live({
    'focus':function(){
        console.log("this is a radio button");
    }
});

sends output to the console window in all browsers, except google chrome (10)

the only difference is the change from 'change' to 'focus' as my event trigger.

can anyone shed some light?

Answer 1

Check this question [1], it states that the focus events do not get fired on radio buttons in chrome and safari.

[1] https://stackoverflow.com/a/5744926/1317080

Answer 2

If using jQuery 1.7+ you should probably do:

$(document).on({
    change: function(){
        console.log("this is a radio button on change");
    },
    focus: function() {
        console.log("this is a radio button on focus");
    }
}, '.input_form input[type="radio"]');

If still using live, and not needing a map, do:

$('.input_form input[type="radio"]').live('focus', function(){
    console.log("this is a radio button");
});

or with a map:

$('.input_form input[type="radio"]').live({
    focus: function(){
        console.log("this is a radio button");
    }
});

In webkit focus is not given to radio buttons on click automaticly, only if using tab. However you can set focus to the element, all though why you would do it this way is beyond me, but it is possible:

$(document).on({
    click: function(){
        console.log("this is a radio button on click");
        $(this).focus();
    },
    focus: function() {
        console.log("this is a radio button on focus");
    }
}, '.input_form input[type="radio"]');

FIDDLE

Answer 3

Im not sure but think you will have to use focusin instead of focus.

$('.input_form input[type="radio"]').live({
    'focusin': function(){
        console.log("this is a radio button");
    }
});

At least some time ago focusin was a normalized event for dealing with live and focus.

And blur is called focus out

---

Note:

The focusin event is sent to an element when it, or any element inside of it, gains focus. This is distinct from the focus event in that it supports detecting the focus event on parent elements (in other words, it supports event bubbling).