Click event with DOM dynamically updates
<p>I'm playing with a few samples to learn jQuery. I made an example to add items to a list when user clicks an <code>add</code> button and display items list when they click in any item of the list:</p>

<p>The code:</p>

<p>HTML</p>

<pre><code>&lt;div id="sample"&gt;&lt;/div&gt;
    &lt;a id="add" href="#"&gt;Add&lt;/a&gt;
    &lt;ul id="list"&gt;
        &lt;li&gt;old item&lt;/li&gt;
        &lt;li&gt;old item&lt;/li&gt;
        &lt;li&gt;old item&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>jQuery</p>

<pre><code>var $itemsList = jQuery('#list li');

jQuery('#add').click(function(e){
    e.preventDefault();
    jQuery('#list').append('&lt;li&gt;new item&lt;/li&gt;');
    $itemsList = jQuery('#list li');
});

$itemsList.click(function(e){
    e.preventDefault();
    console.log('there are ' + $itemsList.length + ' items');
    $itemsList.each(function(){
        console.log(jQuery(this).text());
    });
});
</code></pre>

<p>The problem:</p>

<p>If the user clicks in old items, the console displays all items (old and new), but if the user clicks in new items, created by clicking the <code>add</code> button, they are not being displayed. I'm assuming that the event click was asigned to <code>$itemsList</code>, and this object only refers to items created when script loads but not with successive created items.</p>

<p>Any advice, sugestions?</p>
