克隆的作品只有一次

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')); 

    }); 
});