How do you add an event to a jQuery element that was just added?
<p>Suppose you want to dynamically add to a HTML menu, where the menu HTML will look like-so:</p>

<pre><code>&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;item-1&lt;/a&gt;
&lt;li&gt;&lt;a href="#"&gt;item-2&lt;/a&gt;
&lt;/ul&gt;
</code></pre>

<p>And each  element has a "click" event bound to it by. How does one create this dynamically with jQuery?</p>

<p>What'd I'd like is the equivalent of the following (with hypothetical menu_item array of objects with 'title's):</p>

<pre><code>$('menu').append("&lt;ul&gt;");
for (var index in menu_items) {
    $('menu').append("&lt;li&gt;&lt;a href='#'&gt;"+menu_item['title']+"&lt;/a&gt;")
             .live("click", function(e) { /* Event Handler */ });
}
$('menu').append("&lt;/ul&gt;");
</code></pre>

<p>Unfortunately this won't work for two reasons (at least, that I'm aware of):</p>

<ol>
<li><ul></ul> tags can't be added separately like this with jQuery; and</li>
<li>the .live() element matches only the most recent element inserted.</li>
</ol>

<p>I'd appreciate insight into how one may solve this problem with jQuery. I'd prefer to do this without cluttering up my ID namespace, if that's possible.</p>

<p><strong>EDIT</strong>:</p>

<p>Two clarifications (in case it's not obvious):</p>

<ol>
<li><p>The &lt; ul > doesn't exist to start with.</p></li>
<li><p>Information from menu_item is used in the function (i.e. .live('click', function(e) { /* do_something_with ... */ menu_item['info'] } ).</p></li>
</ol>
