Change event not firing when radio button is selected with keyboard

Question

<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

Answer 1

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(); }
  });
});

Answer 2

In jquery 1.4.2 @ selector does not work. Look at this example to see if it is useful to you, change the "change" event per "click".

html

<input type="radio" name="rdio" value="a" checked="checked" />
<input type="radio" name="rdio" value="b" />
<input type="radio" name="rdio" value="c" />

<br />

<div id="test"></div>

javascript:

$("input[name='rdio']").click(function(){
    if ($("input[name='rdio']:checked").val() == 'a')
        $("#test").append("<div>a</div>");
    else if ($("input[name='rdio']:checked").val() == 'b')
        $("#test").append("<div>b</div>");
    else
        $("#test").append("<div>c</div>");
});

example
ref 1
ref 2