JQuery binding in a loop
<p>I have a loop</p>

<pre><code>for (i = 0; i &lt; 10; i++)
{
    outPut.innerHTML += "&lt;div id='file" + i + "'&gt;" + i + "&lt;/div&gt;";
    $('#file' + i).on('click', function(event) {
        alert('User clicked on ' + i);
    }).css('cursor', 'pointer');
}
</code></pre>

<p>and only last element gets event attached. What is the problem?</p>

<p>See the test here <a href="http://jsfiddle.net/haF7Y/" rel="nofollow">http://jsfiddle.net/haF7Y/</a></p>
