On events in loop in dynamic elements
<p>I need to set events to elements makes "on the fly", like <code>var X = $('HTML CODE HERE')</code>, but when I set the events to the last element, all other elements get this last event.</p>

<p>Example here: <a href="http://jsfiddle.net/QmxX4/6/" rel="nofollow">http://jsfiddle.net/QmxX4/6/</a></p>

<pre><code>$(document).ready(function() {

    var ulItem = $('.lst');

    for (var x=0; x&lt;5; x++) {

        var newItemElement = $('&lt;li style="border:solid 1px blue;width:200px;height:40px;"&gt;&lt;/li&gt;');
        ulItem.append(newItemElement);

        var generator = Math.random();
        newItemElement.on('click', function() {
            console.log(generator);  
        });

    }

});
</code></pre>

<p>All elements are diferents, and I attach the event in the element directly, im try to append before and after add event to element, but not work, all element get the last event.</p>

<p>If you make click in the <code>&lt;li&gt;&lt;/li&gt;</code> get code generated in the last event, but "in theory" all elements have diferent events attached..</p>

<p>But if I make other loop appending elements after append al items to <code>&lt;ul&gt;&lt;/ul&gt;</code>, like this:</p>

<pre><code>$.each($(ulItem).children('li'), function(i, item) {
    console.log($(this));
    var generator = Math.random();
    $(this).on('click', function() {
         console.log(generator);
    });
});
</code></pre>

<p>Works... what is the problem?</p>
