Question

我正在创建一个允许为表单创建其他类似字段的函数，但是在多次单击示例jsddile <之后，克隆会生成多个重复项而不是单个副本/ p>

<div class="clone" id="clone_id">
    <div>
       <label>Content</label>
    </div>
 </div>
</div>
<span class="cloner">Cloner</span>
</div>

 ActionBar actionBar = getSupportActionBar();
    actionBar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#95CDBA")));
    actionBar.setTitle(Html.fromHtml("<font color='#000099'>Title bar</font>"));

Answer 1

您有两个问题需要解决。首先，您要复制克隆元素的id。您可以使用removeAttr()删除新元素上的id。

要修复实际的复制，您需要指定只想{em}最后 insertAfter()元素的.clone，而不是在所有之后插入他们。试试这个：

$('.cloner').click(function() {
    $('#clone_id').clone().removeAttr('id').insertAfter('.clone:last');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="col-xs-4">
        <div class="clone" id="clone_id">
            <div>
                <label>Content</label>
            </div>
        </div>
    </div>
    <span class="cloner">Cloner</span>
</div>

Answer 2

在你的例子中，你看到你正在克隆插入其他克隆的整个div，所以基本上你复制了你所做的所有关闭。

正确的解决方案是在＃clone-id div中取出单个div并复制它。这是结果

https://jsfiddle.net/zq565hsk/

$('.cloner').click(function() {
  $('#clone_id').find('div').clone().insertAfter('.clone');
});

Answer 3

重写克隆功能：

$('.cloner').click(function() {
    $('.clone:first').clone().insertAfter('.clone:last');
});

说明：您的代码重复了首先不好的元素ID。如果切换到选择类，则必须确保选择一个元素（：first），然后将其插入一个元素（：last）之后，而不是在每个带有.clone类的元素之后。

Jquery复制使每个复制产生更多的重复

3 个答案: