每次点击链接克隆html时,jQuery都会将我的克隆加倍？

Question

以下html代码段包含输入,选择和链接.当我点击链接时,我想基本上克隆行,我希望将新行附加到最后一行.我也希望删除链接并添加到最后一行.我想让偶数也被延续下去.我将我的jquery代码放在html下面.

<div id="lines">
    <div class="line">
        <span>Value</span><input type="text" name="value" class="value"/>
        <span>Type</span>
        <select name="type" class="type">
        <option>$</option>
    <option>%</option>
    </select>
        <a id="addLine" href="#">Add</a>
    </div>
</div>

$(document).ready(function() {
$('#addLine').click(function() {

       $('.line').clone({withDataAndEvents:true}).appendTo('#lines');

    });
});

当我单击添加时,它首先在第一行下面添加第二行,但是当我再次单击添加时,它会添加2行,所以我有4行,每次单击添加时,它都是行数加倍的行数是什么我不想要.我还希望从除最后一行之外的所有行中删除添加.我可能会删除一个删除特定行,所以我想知道如何处理这个.

Answer 1

那是因为你用line类克隆了整个元素集,这意味着第一次添加一行,第二次添加2,第三次添加4.你可以通过克隆一行来解决这个问题.last:

$('#addLine').click(function() {
    $('.line').last().clone({
        withDataAndEvents: true
    }).appendTo('#lines');
});