Problems with using live in jQuery - Uncaught RangeError: Maximum call stack size exceeded
<p>I have a <code>div</code> which gets dynamically populated with <code>paragraph tags</code> (they don't exist initially). I want each of this newly dynamically added <code>&lt;p&gt;</code> to perform something when being clicked on - i.e. have a click event attached to them. </p>

<p>The only way that I know how to do this is by using <code>live</code> and <code>delegate</code>. </p>

<pre><code>$('div.fromSelected p').live('click', function () {
    $("&amp;ltp&gt;" + $(this).text().substr(3) + '&amp;lt/p&gt;').appendTo('.fromOptionList');
    //$(this).parent().remove();
    $("#auto_box").getNiceScroll().resize();
    $(this).remove();
    $("#auto_box2").getNiceScroll().resize();
});
</code></pre>

<p>However after some time of invoking the <code>click</code> event on the dynamically added paragraphs I get the following error: </p>

<p><strong>Uncaught RangeError: Maximum call stack size exceeded</strong></p>

<p>What will circumvent this problem?</p>
