克隆的作品只有一次

Question

我有類項目一個div，我想克隆多次上一個div用戶點擊與附加ID

這裏是我的HTML

<div class="clone">clone me</div> 
<div id="add">add</div> 

，這裏是我的JavaScript代碼

$(function(){ 
    var request = $('.clone').clone(); 
    $('.clone:last').addClass('test'); // i don't want my new div have the new added class test just clone 
    $('#add').click(function() { 
     console.log('clicked'); 
     request.insertAfter($('.clone:last')); 

     // $('.item:last').after(request); // this doesn't work as well 
    }); 
}); 

它打印到控制檯點擊很多次當我點擊添加

但不CLO NE股利超過一次

我將作出改變克隆的div不想做才能換新

Answer 1

至於request是指相同的元素更多，移動它的click處理程序中。還可以使用:first選擇器來選擇第一個元素。

使用

$('#add').click(function() { 
 
    //Create then object the click handler 
 
    var request = $('.clone:first').clone(); 
 
    request.insertAfter($('.clone:last')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="clone">clone me</div> 
 
<div id="add">add</div>

---

如果你不想改變原有一個受影響的新的。創建最初創建的對象。然而，使用.insertAfter()

var request = $('.clone:first').clone(); 
 
$('#add').click(function() { 
 
    request.clone().insertAfter($('.clone:last')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="clone">clone me</div> 
 
<div id="add">add</div>

Answer 2

把request裏面的功能，因此，它一次又一次地克隆之前創建一個clone()。眼下request僅包含一個元素，如果你是後插入它（它已經是），有沒有效果：

$(function(){ 
    $('#add').click(function() { 
     var request = $('.clone').clone().removeClass("clone"); 
     console.log('clicked'); 
     request.insertAfter($('.clone:last')); 

     // $('.item:last').after(request); // this doesn't work as well 
    }); 
}); 

Answer 3

有是2問題：

1. 你必須把var request = $('.clone:first').clone();內。
2. 您只需克隆first div，使用$('.clone:first').clone()即可。

在這裏你去：

$('#add').click(function() { 
    var request = $('.clone:first').clone(); 
    console.log('clicked'); 
    request.insertAfter($('.clone:last')); 
}); 

JS FIddle DEMO

Answer 4

或者你也可以做同樣的事情，沒有克隆。

$(function(){ 
    var request = $('<div class="clone">clone me</div>'); 
    $('#add').click(function() { 
     console.log('clicked'); 
     request.insertAfter($('.clone:last')); 

    }); 
});