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時，我的克隆數就增加了一倍？

回答

相關問題