1

我有一个动态表，用户可以在其中添加和删除行。当用户单击按钮添加行时，我想将存储的 jQuery 对象插入到 DOM 中，该对象是初始表行的副本.baseRow。在这一行中，我还希望有一个委托的单击事件，该事件对于将来添加的行保持活动状态。

但是，我当前的实现（在 Chrome/IE 中测试）出现了两个问题。第一个是点击处理程序在第一个事件被触发后中断。我可以通过链接.html()after来解决这个问题.clone()，但是当我这样做时，克隆被莫名其妙地剥离了父tr元素并被缩减为仅子元素。

有关问题的示例，请参见此 js fiddle ，或在下面查看代码示例：

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>
4

1 回答 1

3

您克隆一次，然后一遍又一遍地附加该克隆的元素。由于只有一个克隆，因此您永远不会拥有两个以上的元素（原始 + 克隆）。相反，单击时克隆，以便克隆的数量等于点击的数量：http: //jsfiddle.net/YxB9J/5/。

$(document).ready(function(){
    var $baseRow = $('.baseRow'); 
    $('table').delegate('.addRow','click',function(){
        $('tbody').append($baseRow.clone(true, true));
    });
});
于 2012-11-09T21:46:25.850 回答