IE8 e IE7 onchange evento viene attivato solo dopo ripetute selezione

Question

ho un gruppo di radio con un gestore onchange:

<input type="radio" name="Q12" value="radio" id="Q12_0" onchange="nextPnl('Q12');"> 
<br/> 
<input type="radio" name="Q12" value="radio" id="Q12_1" onchange="nextPnl('Q12');"> 
     ​ 

function nextPnl(did) 
{ 
document.write(did); 

}​ 

Il problema è che in IE8 & IE7, l'evento OnChange viene attivato selezione solo dopo ripetute .

Si prega di vedere questa demo nei tool di sviluppo di IE [Modalità Browser] IE8: http://jsfiddle.net/3zwur/2/

Answer 1

Ciò è dovuto ad un bug con IE7 e IE8 di eventi di modifica. Dovresti invece ascoltare l'evento click.

Come mostrato in questo table on quirks mode, l'evento di modifica sui pulsanti di opzione e le caselle di controllo è piuttosto buggato in IE7 e IE8.

È possibile ascoltare l'evento click in questo modo:

<input type="radio" name="Q12" value="radio" id="Q12_0" onclick="nextPnl('Q12');"> 
<br> 
<input type="radio" name="Q12" value="radio" id="Q12_1" onclick="nextPnl('Q12');"> 

e una forchetta del violino: http://jsfiddle.net/T7VYL/

Di solito, utilizzando una libreria javascript, come JQuery e YUI rendere la vita più facile, anche se dai miei test, non risolvono questo bug nelle versioni precedenti di IE.

Se si desidera ascoltare ancora l'evento di modifica, è possibile distribuire questa correzione: http://www.ridgesolutions.ie/index.php/2011/03/02/ie8-chage-jquery-event-not-firing/. Fondamentalmente ascolta l'evento click e quindi fa sì che l'elemento attivi un evento change.

Come dimostrato dal violino del richiedente: http://jsfiddle.net/3zwur/3

Answer 2

Un'altra opzione è quella di avere un evento onchange come già avete, e aggiungere un evento onclick che rimuove attenzione dal pulsante di scelta:

<input type="radio" name="Q12" value="radio" id="Q12_0" onclick="this.blur()" onchange="nextPnl('Q12');"> 

Answer 3

altro soluzione consiste nel mettere l'evento onchange nel modulo allegato tramite jQuery.

$('#form').on('change', function() { 
    $(this).submit(); 
});