Javascript 在维护委派事件的同时复制存储的jQuery对象

我有一个动态表，用户可以在其中添加和删除行。当用户单击按钮添加一行时，我想在DOM中插入一个存储的jQuery对象，它是初始表行

.baseRow

的副本。在这一行中，我还希望有一个委托的单击事件，该事件对于将来添加的行保持活动状态

然而，我当前的实现（在Chrome/IE中测试）存在两个问题。第一个是，单击处理程序在触发第一个事件后中断。我可以通过在

.clone（）

之后链接

.html（）

来解决这个问题，但是当我这样做时，克隆会莫名其妙地从父

tr

元素中剥离出来，并减少为仅子元素

有关该问题的示例，请参见，或下面的代码示例：

JS

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

HTML

<table>
    <thead>
        <tr>
            <th>Add Row</th>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr class="baseRow">
            <td class="addRow">+</td>
            <td>Body 1</td>
            <td>Body 2</td>
        </tr>
    </tbody>
</table>

添加行
标题1
标题2
+
正文1
正文2

克隆一次，然后反复附加克隆的元素。因为只有一个克隆，所以您的元素不会超过两个（原始+克隆）。而是在单击时进行克隆，以便克隆的数量等于单击的数量：

---

那很有趣！我的印象是，一个克隆可以用于多个拷贝，因此，一旦克隆，我就会变得更高效。@Moses:基本上，你所说的“拷贝”就是“克隆”

.clone（）

只提供了一个与原始元素类似的新元素-克隆没有“特殊”功能或其他功能。没错，我只是希望它的行为类似于传统操作系统中的复制/粘贴，在传统操作系统中，一个副本可以多次粘贴。然而，情况似乎并非如此。我注意到的一个问题是，这不会在DOMReady上生成副本，而是在单击事件时生成副本。这意味着将用户输入的值复制到新行中会产生意外的后果。有没有办法避免这种情况？@Mosts：有，因为它克隆了（可见的）第一行。您还可以在文档准备就绪时克隆一次，以便在单击时克隆的元素本身是一个（不可见的）克隆。因此，用户无法更改该元素的值，因此每次都将克隆一个干净的元素。

$(document).ready(function(){
    var $baseRow = $('.baseRow'); 
    $('table').delegate('.addRow','click',function(){
        $('tbody').append($baseRow.clone(true, true));
    });
});