Change event not firing when radio button is selected with keyboard
jquery
Solution
Here is a reliable fix http://evilstreak.co.uk/blog/fixing-change-events-on-radios
And using it this is how you would implement it with your example: And here is a demo of the code below http://www.jsfiddle.net/uDkdJ/1/ I tested this demo in FF3.6, IE8, Safari5, Chrome7, and Opera10.65
$.fn.fix_radios = function() {
function focus() {
if ( !this.checked ) return;
if ( !this.was_checked ) {
$( this ).change();
}
}
function change( e ) {
if ( this.was_checked ) {
e.stopImmediatePropagation();
return;
}
$( "input[name=" + this.name + "]" ).each( function() {
this.was_checked = this.checked;
} );
}
return this.focus( focus ).change( change );
}
$(function() {
$( "input[type=radio]" ).fix_radios();
$("input[name='my_radio_button']").change(function(){
if ($("input[@name='my_radio_button']:checked").val() == 'ONE'){
do_this_stuff();
} else { do_other_stuff(); }
});
});
Problem
``` <script> $("input[name='my_radio_button']").change(function(){ if ($("input[@name='my_radio_button']:checked").val() == 'ONE'){ do_this_stuff(); } else { do_other_stuff(); } }); </script> <input type="radio" name="my_radio_button1" id="radio1" value="ONE" checked /> <input type="radio" name="my_radio_button2" id="radio2" value="TWO" /> ``` (assume complete HTML and the script firing when all is ready) The change event seems to fire when clicking to select a radio option, but not when the selection is changed with keyboard. Can anything be done about this? edit - makes no difference if I use `bind` or `live` -- is this just a bug? To clarify, the event does not fire even after focus is lost. edit 2 - nobody knows the reason for this? edit 3 - as DonaldIsFreak pointed out this seems to be a chrome problem