AJAX Fermetures et ciblage 'this'

Question

Dans l'exemple de code ci-dessous, la fonction de rappel de succès enregistre quatre fois l'entrée # 04.update 'plutôt que chaque entrée individuelle, ce qui est logique pour voir comment fonctionnent les fermetures. entrée individuelle en utilisant cela.

<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

Vous avez oublié var

var $this = $(this); 

Ne pas oublier var. Un programmeur qui a oublié var est allé au lit la nuit et s'est réveillé pour trouver son appartement en feu. Il a ajouté var et le feu s'est éteint. Un autre programmeur a quitté var sur complètement peu avant de partir en voyage d'affaires en Europe. L'avion a développé des problèmes mécaniques en vol peu après le décollage, ce qui a amené le pilote à lancer des procédures d'atterrissage d'urgence. De son ordinateur portable le programmeur a rapidement ajouté var et l'avion l'a fait en toute sécurité à un aéroport.

N'oubliez pas var. Si vous mettez var dans votre code, vous rencontrerez quelqu'un de spécial aujourd'hui. Essayez-le. Cela semble incroyable mais ça marche vraiment!

Answer 2

correct de Pointy sur l'utilisation var, une autre alternative est d'utiliser $.proxy(), comme ceci:

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

Ce créateur de fermeture fera this référence à l'élément d'entrée lorsque vous êtes dans la fonction de rappel success, qui est habituellement ce que vous cherchez ... alors je ne sais pas pourquoi ce n'est pas le cas par défaut, mais dans tous les cas $.proxy() rectifie la situation.