jQuery function using the latest value instead of the value present at creation
<p>I have the following code:</p>

<pre><code>$(document).ready(function() {
   var $body = $("body");
   for (var i = 0; i &lt; 10; i++)
   {
       var $a = $("&lt;a&gt;");
       $body.append($a);
       $a.text(i);

       $a.click(function() {
           alert(i);
       });  
   }
});
</code></pre>

<p>Clicking on any of the anchors will alert the number <code>10</code>, when I'd of expected it to alert the value of <code>i</code> of when the function was created.</p>

<p>To get it working, I've just used <code>data</code> to append the ID to the anchor and I retrieve it within the function, but this just seems really messy. Why can I not specify the value when the function was created?</p>

<p><a href="http://jsfiddle.net/8JF45/1/" rel="nofollow">Fiddle here.</a></p>
