jQuery ändert Ereignis zweimal ausgelöst, wenn Fokus auf ein anderes Steuerelement innerhalb der Änderung Callback

Question

Ein seltsamer Fehler hat mir Kopfschmerzen in letzter Zeit, und ich habe es geschafft, es auf die einfachste Form möglich zu verdummen. Sehen Sie diese Geige: 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(); 
}); 

Grundsätzlich, wenn Sie das erste Textfeld ändern und mit der Maus an anderer Stelle im Dokument klicken, wird die Änderung Ereignis ausgelöst wird, wie üblich. Wenn Sie jedoch den Wert ändern und die Eingabetaste drücken, um die Änderung auszulösen, wird das Ereignis zweimal ausgelöst.

Ich habe bemerkt, der Bug ist nur mit Chrome. Firefox löst das Ereignis nicht zweimal aus, und IE unterstützt nicht einmal die Eingabetaste, um eine Änderung an einer Eingabe auszulösen.

Ich denke, dass passiert, weil der Fokus innerhalb des Ereignisrückrufs wechselt. Gibt es einen Weg dazu?

Answer 1

Der Fokus() auf anderen Steuerelement in Ihrem Change Eventhandler rufen Sie das Änderungsereignis in Chrom, weil es "Unschärfe" Ihr aktuelles Steuerelement unscharf, wenn der Wert unterschiedlich ist.

Dieser Fehler ist nicht neu, können Sie einen Blick auf diesen Bug Ticket auf jQuery nehmen: http://bugs.jquery.com/ticket/9335

Sie können durch Deaktivieren der Änderung Eventhandler dieses Problem umgehen, bevor Sie den Fokus auf das Steuerelement zu entfernen. hier ein wenig exemple von dem, was ich sagen will:

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

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

Answer 2

Auch können Sie diesen Fehler umgehen mit nur Ihre Eingabe verschwimmen auf Enter-Taste:

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