jQuery每次点击一个链接来克隆html时，我的克隆数就增加了一倍？

以下html代码片段包含一个输入，一个选择和一个链接。当我点击链接时，我想要基本克隆线，我想要将新线附加到最后一行。我也希望链接被删除并添加到最后一行。我想让这个结果也继续下去。我会把我的jquery代码放在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个，每次我点击添加时间，它被加倍这是我不想要的线的数量。我也想添加从除最后一个之外的所有行中删除。我可能会有一个删除以及删除特定的行，所以我想建议如何处理这个。

来源

2011-04-01 Xaisoft

这是因为你使用line类克隆了整个元素集，这意味着它第一次添加一行，第二次将添加2，第三次将添加4.您可以通过克隆一行来修复此问题.last：

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

来源

2011-04-01 17:17:32 mVChr

哦，不，我得到了在投票这件事舞麒麟。世界到底是什么？ – karim79 2011-04-01 17:22:05

如果我想将下一行追加到上一行而不是行，那么这将如何更改代码。 – Xaisoft 2011-04-01 17:34:55

使用'insertAfter（this）'而不是'appendTo（'＃lines'）' – mVChr 2011-04-01 21:28:54

jQuery选择$（“线”）选择所有项目与类‘线’作为阵列的，那么你克隆并添加新的阵列后面的现有阵列。

你想要做的是$（'。line'）[0]为了克隆第一个项目。（或者你想要克隆过哪一条线）

干杯，

CEC

来源

2011-04-01 17:17:41

我会注意到'$（'line'）[0]'返回DOM元素而不是jquery对象。 – climbage 2011-04-01 17:21:09

你的权利，但是如果你仔细观察我所进入的内容，那里有一段时间.. $（'。line'）不是$（'line'） – 2011-04-01 17:26:11

糟糕，是的，你做到了。但问题仍然存在。 – climbage 2011-04-01 17:30:33

你克隆与.line区段课堂上的一切，所以当然它会在每次运行时的两倍。缩小你的结果，可能是通过改变克隆选择器为

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

或类似的。

来源

2011-04-01 17:18:49

它增加了多个.line's，因为每次点击#addLine，$('.line')匹配越来越多的元素。

我会做的是制作一个模板，每次追加到#lines，但是，最简单的解决方案是将$('.line')更改为$('.line').last()。

要获得#addLine仅是在最后一行，

首先，你需要一个现场活动：
$('#addLine').click(function() {变化
$('#addLine').live('click', function() {

二，事件回调：

var $newLine = $('.line').last().clone({withDataAndEvents:true}); 

$("#addLine").remove(); 

$newLine.appendTo('#lines');

来源

2011-04-01 17:20:28 simshaun

改变你的函数是：

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

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

来源

2011-04-01 17:21:43 Porco

jQuery每次点击一个链接来克隆html时，我的克隆数就增加了一倍？

回答

相关问题