Изменение события не срабатывает при выборе переключателя с помощью клавиатуры

<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" />

(предположим, что полный HTML и стрелка script, когда все будет готово)

Событие изменения, похоже, срабатывает при нажатии на выбор радиостанции, но не при изменении выбора с клавиатуры. Можно ли что-нибудь сделать по этому поводу?

edit - не имеет значения, если я использую bind или live - это просто ошибка?

Чтобы уточнить, событие не срабатывает даже после потери фокуса.

edit 2 - никто не знает причину этого?

edit 3 - как заметил DonaldIsFreak, это, по-видимому, проблема с хромом.

Ответ 1

Вот надежное исправление http://evilstreak.co.uk/blog/fixing-change-events-on-radios

И используя его, вы сможете реализовать его в своем примере: И вот демо-версия ниже http://www.jsfiddle.net/uDkdJ/1/ Я тестировал эту демонстрацию в FF3.6, IE8, Safari5, Chrome7 и 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(); }
  });
});

Ответ 2

В jQuery 1.4.2 @селектор не работает. Посмотрите на этот пример, чтобы узнать, полезен ли он вам, измените событие "change" на "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>");
});

пример
ref 1
ref 2

Ответ 3

К сожалению, радиокнопки не меняют изменения при изменении с клавиатуры, пока вы не потеряете фокус.

Если вы хотите обойти эту проблему, вы всегда можете настроить таймер, который контролирует состояние, и отправляет событие при его изменении. Что-то вроде (псевдокод):

var monitorRadio = function(radio)
{
   var state = $("input[@name='']:checked").val();
   $(radio).data("state", state);
   var func = function()
   {
     var state = $("input[@name='']:checked").val();
     if (state != $(radio).data("state"))
     {
       $(radio).data("state", state);
       // dispatch the change event
       $(radio).change();
     }
     setTimeout(100, func());
   };   


   func();
}

Ответ 4

Мне не очень повезло, когда радиокнопка изменила его состояние с помощью клавиш со стрелками в моем jsfiddle, так что вот слепой ответ:

Использовать .keypress() То же правило о том, что он не меняется до тех пор, пока не будет устранен фокус, применим к полям выбора, и я успешно использовал .keypress() there

http://api.jquery.com/keypress/

Ответ 5

$("input[name='my_radio_button']").bind('change keypress', function(){
  if ($("input[@name='my_radio_button']:checked").val() == 'ONE'){
    do_this_stuff(); 
  } else { do_other_stuff(); }
});

Проблема с этим методом заключается в том, что событие срабатывает один раз, когда пользователь нажимает клавишу, и снова, когда он теряет фокус. Я не уверен, что делать do_this_stuff() и do_other_stuff(), но если они срабатывают несколько раз, это проблема, вы можете исправить это с помощью var, чтобы проверить, что такое предыдущее значение, поэтому вы знаете, действительно ли оно изменилось:/p >

$("input[name='my_radio_button']").bind('change keypress', function(){
  if ($(this).value() != prevValue) {
    if ($("input[@name='my_radio_button']:checked").val() == 'ONE'){
      do_this_stuff(); 
    } else { do_other_stuff(); }
  }
  prevValue = $(this).value();
});