AJAX Closures und Targeting 'this'

Question

In dem Codebeispiel protokolliert die Erfolgsrückruffunktion die Eingabe # 04.update viermal statt jeder einzelnen Eingabe individuelle Eingabe mit diesem.

<input type="text" name="" id="01" class="update"> 
<input type="text" name="" id="02" class="update"> 
<input type="text" name="" id="03" class="update"> 
<input type="text" name="" id="04" class="update"> 

function updateFields(){ 
$('input.update').each(function(){ 
    $this = $(this); 
    $.ajax({ 
     data: 'id=' + this.id, 
     success: function(resp){ 
     console.log($this); 
      $this.val(resp) 
     } 
    }); 
    }); 
} 

Answer 1

Sie haben vergessen var

var $this = $(this); 

nicht var Vergessen Sie. Ein Programmierer, der var vergaß, ging nachts ins Bett und wachte auf, um seine brennende Wohnung zu finden. Er fügte var hinzu und das Feuer ging aus. Ein anderer Programmierer verließ var aus komplett kurz vor dem Verlassen auf einer Geschäftsreise nach Europa. Das Flugzeug entwickelte kurz nach dem Start mechanische Probleme während des Fluges und veranlasste den Piloten, Notlandungsverfahren einzuleiten. Von seinem Laptop aus fügte der Programmierer schnell var hinzu und das Flugzeug schaffte es sicher zum Flughafen.

Nicht vergessen var. Wenn Sie var in Ihren Code eingeben, werden Sie jemanden treffen, der heute ist. Versuch es. Es klingt fantastisch, aber es funktioniert wirklich!

Answer 2

Zipfel korrekt ist auf var-Nutzung, eine weitere Alternative ist $.proxy() zu verwenden, wie folgt aus:

function updateFields(){ 
$('input.update').each(function(){ 
    $.ajax({ 
     data: 'id=' + this.id, 
     success: $.proxy(function(resp){ 
       $(this).val(resp); 
       }, this) 
    }); 
    }); 
} 

Dieses Konzept Schließung this beziehen sich auf das Eingangselement machen, wenn Sie in der success Rückruf sind, die in der Regel Was Sie suchen ... also bin ich mir nicht sicher, warum das nicht standardmäßig der Fall ist, aber auf jeden Fall korrigiert $.proxy() die Situation.