Question

我有一个带有类项目的div，我想要克隆多次，因为用户单击带有添加id的div

这是我的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
    });
});

打印到控制台时，单击添加

多次

但不会多次克隆div

我将对克隆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>

如果您不希望更改原始版本，则会影响新版本。创建最初创建的对象。但是，在使用clone()

之前创建.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放在函数内部，以便它一次又一次地克隆。现在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个问题：

你必须把var request = $('.clone:first').clone();放进去。
您只需克隆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'));

    });
});

克隆只工作一次

4 个答案: