Question

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

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

有关此问题的示例，请参阅this 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>

Answer 1

您克隆一次，并反复追加克隆元素。由于只有一个克隆，因此您将不会有两个以上的元素（原始+克隆）。而是在点击时克隆，以便克隆数量等于点击量：http://jsfiddle.net/YxB9J/5/。

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

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

1 个答案: