jQuery change event attivato due volte quando si concentra su un altro controllo all'interno della modifica callback

Question

Un bug strano mi ha causato un sacco di mal di testa di recente, e sono stato in grado di ridurlo alla forma più semplice possibile. Vedere questo violino: http://jsfiddle.net/PgAAb/

<input type="text" id="foo" placeholder="Change me!"><br> 
<input type="text" id="bar" size="30" placeholder="Dummy control to switch focus"> 

$('#foo').change(function() { 
    console.log('Changed!'); 
    $('#bar').focus(); 
}); 

In sostanza, quando si cambia la prima casella di testo e utilizzare il mouse per fare clic altre parti del documento, i fuochi di eventi di modifica, come al solito. Tuttavia, se si modifica il valore e si preme il tasto Invio per attivare la modifica, l'evento viene attivato due volte.

Ho notato che il bug è solo con Chrome. Firefox non attiva l'evento due volte e IE non supporta nemmeno il tasto Invio per attivare la modifica su un input.

Immagino che ciò accada a causa della commutazione dello stato attivo all'interno della richiamata dell'evento. C'è un modo per aggirare questo?

Answer 1

La messa a fuoco() su altro controllo nel gestore di eventi di modifica chiama l'evento di modifica in chrome perché sfoca "sfoca" il controllo corrente se il valore è diverso.

Questo bug non è nuova, si può dare un'occhiata a questo biglietto bug su jQuery: http://bugs.jquery.com/ticket/9335

È possibile aggirare il problema disattivando il cambiamento EventHandler, prima di rimuovere il focus sul vostro controllo. Ecco un piccolo esempio di quello che voglio dire:

$('#foo').change(changeHandler); 

function changeHandler() { 
    console.log('Changed!'); 
    $(this).off('change').blur().on('change', changeHandler); 
    $('#bar').focus(); 
} 

Answer 2

Inoltre, è possibile risolvere questo bug con solo sfocare l'ingresso sul tasto Invio:

jQuery('input').keydown(function(e){ 
    if(e.keyCode==13) jQuery(this).blur(); 
});