Comportement du sélecteur Jquery en cache que je ne comprends pas

Question

Étant donné le code suivant, pourquoi ai-je des valeurs différentes pour a et b? J'aurais pensé qu'ils reviendraient la même chose:

(function() { 
    var a = $('#foo'); 

    var Test = function(){ 
    console.log(a); //outputs 'jQuery()' 
    var b = $('#foo'); 
    console.log(b); //outputs 'jQuery(select#foo)' which is what I want 
    }; 
})(); 

Cette question provient de moi d'essayer de coller les sélecteurs fréquemment utilisés dans vars. A l'origine je le faisais dans chaque méthode (comme je l'ai fait avec var b dans l'exemple ci-dessus) mais ensuite j'ai trouvé que je devais utiliser les sélecteurs dans plusieurs méthodes, donc j'ai déplacé l'affectation pour être disponible (ou je pensais) à tous les méthodes dans cette fonction anonyme. Comme vous pouvez le voir, cela ne fonctionne pas. Pourquoi est-ce?

EDIT: ce code est chargé par une méthode qui est déclenchée par un clic. L'id foo est présent au chargement de la page et n'est pas défini ou modifié dynamiquement.

Answer 1

Assurez-vous que le code n'est pas appelé jusqu'à ce que votre page ait terminé le chargement!

$(function() { 
    // your code 
}); 

, vous aurez également, bien sûr d'être prudent sur les choses de mise en cache qui pourraient être modifiés sur la page par d'autres parties de votre application côté client.

Answer 2

Juste pour améliorer la réponse précédente - b n'est évalué que lorsque vous appelez la fonction Test, probablement une fois la page chargée. Mettez en cache les sélecteurs dans le document prêt:

$(document).ready(function(){ 
    var a = $('#foo'); 
}); 

Je cache uniquement les sélecteurs lorsque j'utilise le même sélecteur dans un bloc de code. J'utilise la convention de nommage variable $ pour ceci:

var $divs = $('div'); 

Vous pouvez également les fonctions de la chaîne ensemble pour éviter d'avoir à mettre en cache le sélecteur:

$('div').append('hello world').addclass('hello').show();