Cached Jquery selector behavior that I do not understand
<p>Given the following code why am I getting different values for <code>a</code> and <code>b</code>? I would have thought they would return the same thing:</p>

<pre><code>(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
    };
})();
</code></pre>

<p>This question stems from me trying to stick frequently used selectors into vars. Originally I was doing it in each method (like I did with <code>var b</code> in the above example) but then I found I needed to use the selectors in multiple methods so I moved the assignment out to be available (or so I thought) to all of the methods in that anonymous function. As you can see, it does not work. Why is this?</p>

<p>EDIT: this code is loaded by a method that is triggered by a click. The id foo is present at page load and is not dynamically set or changed.</p>
