evento de cambio no disparar cuando se selecciona el botón de radio con teclado

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

(suponiendo HTML completo y la secuencia de comandos de disparar cuando todo esté listo)

El evento de cambio parece al fuego cuando se hace clic para seleccionar una opción de radio, pero no cuando la selección se cambia con el teclado. ¿Se puede hacer algo acerca de esto?

editar - no hace ninguna diferencia si uso bind o live - ¿Esto es solo un error?

Para aclarar, el evento no se dispara incluso después de perder el foco.

editar 2 - nadie sabe el motivo?

edición 3 - DonaldIsFreak como señaló esto parece ser un problema de cromo

Answer 1

aquí es una solución fiable http://evilstreak.co.uk/blog/fixing-change-events-on-radios

y usarlo así es como se llevaría a cabo con su ejemplo: Y aquí es un demo del código de abajo http://www.jsfiddle.net/uDkdJ/1/ probé esta demo en FF3.6, IE8, Safari5 , Chrome7 y 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

Desafortunadamente, botones de radio No activar los eventos de cambio cuando se cambia con el teclado, hasta que se pierde el foco.

Si desea evitar este problema, siempre puede configurar un temporizador que supervisa el estado y distribuye un evento cuando cambia. Algo así como (pseudocódigo):

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

Answer 3

no estoy teniendo mucha suerte para conseguir el botón de radio para cambiar su estado con las teclas de flecha en mi jsFiddle, así que aquí tiene una respuesta ciega:

Uso .keypress() El mismo regla de no cambiar hasta perder el enfoque se aplica para seleccionar las cajas, y yo he utilizado con éxito .keypress() no

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

Answer 4

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

El problema con este método es que el evento se disparará una vez cuando el usuario presione una tecla, y nuevamente cuando pierda el foco. No estoy seguro de lo que do_this_stuff() y do_other_stuff() hacer, pero si ellos disparar más de una vez es un problema, se podría solucionar este problema con una var para comprobar cuál es el valor anterior era, para saber si se trata en realidad cambió:

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

Answer 5

En jquery 1.4.2 @ selector no funciona. Mire este ejemplo para ver si es útil para usted, cambie el evento de "cambio" por "clic".

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