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

以下html代码段包含输入，选择和链接。 当我点击链接时，我想基本上克隆行，我希望将新行附加到最后一行。 我也希望删除链接并添加到最后一行。 我希望甚至还能继续进行。 我将把我的jquery代码放在html下面。

 
 Value Type  $ %  Add 
 
 $(document).ready(function() { $('#addLine').click(function() { $('.line').clone({withDataAndEvents:true}).appendTo('#lines'); }); }); 

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

Answer 1

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

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

Answer 2

jquery selector $（’。line’）选择所有带有“line”类的项作为数组，然后克隆并将新数组添加回现有数组。

你想要做的是$（’。line’）[0]才能克隆第一个项目。 （或者你希望克隆哪一行）

干杯，

CEC

Answer 3

你正在使用.line类克隆所有东西，所以当然每次运行都要加倍。 缩小结果，可能通过将克隆选择器更改为

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

或类似的。

Answer 4

它添加了多个.line ，因为每次点击#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'); 

Answer 5

将您的function更改为：

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