help with understanding the logic behind how javascript executes on new dom elements being created on the fly
<p>I have a this set up</p>

<pre><code>&lt;ul&gt;
&lt;li&gt;item 1&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>my js let me make them sortable and what not, one feature I have is that via ajax i can create a new list item on the fly. But whats interesting is that I have a hoverIntent letting me hover over the list item and a delete and edit icon appears letting me perform the intended actions.</p>

<p>My problem is that when I make a new list item on the fly the hoverIntent isn't applied to it. The code created is identical to the other list items, I know it works because when I refresh the page and reload the js then the hoverIntent kicks in and applies the hover effects to the new items created.</p>

<p>None of this works on the fly tho, how can I make this work?</p>

<p>my js for creating a new list item is:</p>

<pre><code>var timestamp = 0;
    $('.new-group').click(function(e){

        // Only one group per 5 seconds is allowed:
        if((new Date()).getTime() - timestamp &lt; 5000) return false;

        $.get("resources/ajax/groups.ajax.php",{
            action :'new',
            uid     : uid,
            text   :'New Group, Doubleclick to Edit.'
        },function(data){
            $(data).hide().appendTo('.grouplist').fadeIn();
            //GROUP.find(".groups-action-div").show('slow');
        });
        timestamp = (new Date()).getTime();
        e.preventDefault();
    });
</code></pre>

<p>I'm betting that in my success function is where I can make this work,</p>

<p>you can log in and see my problem at www.helixagent.com with login as test/password go into the Contacts tabs and click on the + icon to make a new group</p>
