title: jQuery ReplaceWith adding two copies of cloned node
body: <p><strong>I'm using jquery 1.7.2</strong></p>
  
  <p>I have an jQuery object <code>copyItem</code> in which a subset of the contents contains the following html</p>
  
  <pre><code>&lt;tr&gt;            
      &lt;td class="command" style="" colspan="3"&gt;
          &lt;input type="button" class="insertCommand" value="Add"&gt;
      &lt;/td&gt;        
  &lt;/tr&gt;
  </code></pre>
  
  <p>not too complex.</p>
  
  <p>I also have some template html...</p>
  
  <pre><code>&lt;table id="itemCommandTemplate"&gt;
      &lt;tr&gt;
          &lt;td class="command" style="" colspan="3"&gt;&lt;input type="button" class="editCommand" value="Edit"/&gt;&amp;nbsp;&amp;nbsp;&lt;a href="javascript:void(0);" class="deleteCommand"&gt;delete&lt;/a&gt;&lt;/td&gt;
          &lt;td class="command" style="display: none" colspan="3"&gt;&lt;input type="button" class="saveCommand" value="Save"/&gt;&amp;nbsp;&amp;nbsp;&lt;a href="javascript:void(0);" class="cancelCommand"&gt;cancel&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>... that I am cloning with the following jQuery</p>
  
  <pre><code>var command = $('#itemCommandTemplate tr').clone(true, true);
  </code></pre>
  
  <p>If I write out the html of command, all appears in order.</p>
  
  <p>I then attempt to replace the original html in copyItem with this cloned copy using</p>
  
  <pre><code>copyItem.find('.command').parent('tr').replaceWith(command);
  </code></pre>
  
  <p>after this call, what results is two copies</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td class="command" style="" colspan="3"&gt;&lt;input type="button" class="editCommand" value="Edit"/&gt;&amp;nbsp;&amp;nbsp;&lt;a href="javascript:void(0);" class="deleteCommand"&gt;delete&lt;/a&gt;&lt;/td&gt;
      &lt;td class="command" style="display: none" colspan="3"&gt;&lt;input type="button" class="saveCommand" value="Save"/&gt;&amp;nbsp;&amp;nbsp;&lt;a href="javascript:void(0);" class="cancelCommand"&gt;cancel&lt;/a&gt;&lt;/td&gt;
      &lt;td class="command" style="" colspan="3"&gt;&lt;input type="button" class="editCommand" value="Edit"/&gt;&amp;nbsp;&amp;nbsp;&lt;a href="javascript:void(0);" class="deleteCommand"&gt;delete&lt;/a&gt;&lt;/td&gt;
      &lt;td class="command" style="display: none" colspan="3"&gt;&lt;input type="button" class="saveCommand" value="Save"/&gt;&amp;nbsp;&amp;nbsp;&lt;a href="javascript:void(0);" class="cancelCommand"&gt;cancel&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>I thought perhaps the <code>.find</code> was returning two objects, but the resulting html is correct except for the two nodes inserted. Can't seem to figure it out. If I just replace the html, all looks fine, but I want the events to be attached also.</p>
  
  <p>any clue?</p>
  
  <p><strong>Edit</strong> </p>
  
  <p>adding full contents of <code>copyItem</code></p>
  
  <pre><code>&lt;table&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td style="width: 200px"&gt;company:&lt;/td&gt;
              &lt;td style="width: 100px"&gt;campaigns:&lt;/td&gt;
              &lt;td style="width: 300px"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="companyName"&gt;$5 Dinners&lt;/td&gt;
              &lt;td&gt;
                  &lt;select class="roleTypeList"&gt;
                      &lt;option value="1000"&gt;All&lt;/option&gt;
                      &lt;option value="1001"&gt;Limited&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/td&gt;
              &lt;td rowspan="3" style="text-align: right"&gt;
                  &lt;input id="zzz" name="zzz" type="hidden" value="insert"&gt;
                  &lt;div id="zzz" style=""&gt;
                      &lt;select size="4" name="zzz" multiple="multiple" id="zzz" class="campaignList" style="width:300px;"&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;            
              &lt;/td&gt;        
          &lt;/tr&gt;          
          &lt;tr&gt;
              &lt;td colspan="2"&gt;reports:&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt; 
              &lt;td colspan="2"&gt;
                  &lt;input type="checkbox" value="1004" id="PinRptAdd"&gt;
                  &lt;label for="PinRptAdd"&gt;Pin Report&lt;/label&gt;
                  &lt;input type="checkbox" value="1009" id="CpcAdd"&gt;
                  &lt;label for="CpcAdd"&gt;CPC&lt;/label&gt;
                  &lt;input type="checkbox" value="1010" id="CpaAdd"&gt;
                  &lt;label for="CpaAdd"&gt;CPA&lt;/label&gt;
                  &lt;input type="checkbox" value="1011" id="S2cAdd"&gt;
                  &lt;label for="S2cAdd"&gt;S2C&lt;/label&gt;                                            
                  &lt;input type="checkbox" value="1003" id="LiveDetailsAdd" style=""&gt;
                  &lt;label for="LiveDetailsAdd" style=""&gt;Live Details&lt;/label&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="command" style="" colspan="3"&gt;
                    &lt;input type="button" class="insertCommand" value="Add"&gt;
              &lt;/td&gt;        
           &lt;/tr&gt;    
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>