Copy stored jQuery object while maintaining delegated events
<p>I have a dynamic table where users can add and delete rows. When the user clicks a button to add a row, I want to insert into the DOM a stored jQuery object which is a copy of the initial table row <code>.baseRow</code>. Within this row, I also want to have a delegated click event that stays alive for future added rows.</p>

<p>However, two issues are presenting themselves with my current implementation (tested in Chrome/IE). The first is that the click handler breaks after the first event is fired. I am able to solve this by chaining <code>.html()</code> after <code>.clone()</code>, but when I do that the clone is inexplicably stripped of the parent <code>tr</code> element and is reduced to just the children elements.</p>

<p>See <a href="http://jsfiddle.net/YxB9J/3/" rel="nofollow">this js fiddle</a> for an example of the issue, or below for a sample of the code:</p>

<p><strong>JS</strong></p>

<pre><code>$('document').ready(function(){
    var $baseRow = $('.baseRow').clone(true,true); 
    $('table').delegate('.addRow','click',function(){
        $('tbody').append($baseRow);
    });
});​
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;table&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Add Row&lt;/th&gt;
            &lt;th&gt;Header 1&lt;/th&gt;
            &lt;th&gt;Header 2&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr class="baseRow"&gt;
            &lt;td class="addRow"&gt;+&lt;/td&gt;
            &lt;td&gt;Body 1&lt;/td&gt;
            &lt;td&gt;Body 2&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
