0

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?

animuson
  • 53,861
  • 28
  • 137
  • 147
Kevin Bradshaw
  • 6,327
  • 13
  • 55
  • 78

3 Answers3

1

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

adeneo
  • 312,895
  • 29
  • 395
  • 388
  • Upgraded to 1.7 and it tried all three solutions, but still cannot get 'focus' to trigger in chrome. in your first solution, 'this is radio change' gets written to console, but not 'this is radio focus' in chrome, where as in firefox both sentences are logged at the same time – Kevin Bradshaw Apr 09 '12 at 12:07
  • @KevinBradshaw - updated my answer, but I believe Mirko was faster. – adeneo Apr 09 '12 at 13:16
  • Accepted Mirko's answer and upvoted yours for being so informative – Kevin Bradshaw Apr 09 '12 at 17:32
0

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).

Andreas Louv
  • 46,145
  • 13
  • 104
  • 123
0

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

Community
  • 1
  • 1
Mirko Lindner
  • 626
  • 5
  • 10