每次点击jQuery克隆div [英] jQuery clone div every time clicked

问题描述

我有一个简单的表单，并有一个按钮用于在单击时克隆我的表单。问题是，当我第一次点击按钮时，它工作正确，但在下次单击时会附加多个div。每次点击后是否有任何方法可以逐一复制？
这里是我的代码片段：

$（document）.ready （function（）{$（。Add）。click（function（）{$（。formi）。clone（）。insertAfter（。formi：last）;}）;}）;

.formi {border：1px solid＃000; width：50％;}

< script src = https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js\"></script><span class =Add>添加+< / span> < div class =all> < form class =formi> < input type =textplaceholder =name/> < select name =cars> < option value => one< / option> < option value => two< / option> < /选择> < button type =submit> ok< / button> < / form>< / div>

解决方案

您可以找到第一个表单，而不是使用 eq（0）找到DOM中的所有内容，或者找到最近的一个，

.formi {border：1px solid＃000; width：50％;}

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js>< / script>< span class =添加>添加+< / span>< div class =all>< form class =formi>< input type =textplaceholder =name/>< select name =cars>< option value => one< / option>< option value => two< / option> ;< / select>< button type =submit> ok< / button>< / form>< / div>  

I have a simple form and with a button to clone my form when clicked. The problem is that when I click in button for the first time, it works correct, but for the next times it append many divs when clicked. Is there any way to copy one by one every time clicked? here is my snippet:

$(document).ready(function() {
    $(".Add").click(function() {
        $(".formi").clone().insertAfter(".formi:last");
    });
});

.formi {
    border: 1px solid #000;
    width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
    <form class="formi">
        <input type="text" placeholder="name" />
        <select name="cars">
            <option value="">one</option>
            <option value="">two</option>
        </select>
        <button type="submit">ok</button>
    </form>
</div>

解决方案

You can find the first form instead of finding all in the DOM using eq(0) or find the recent one ,

$(document).ready(function(){
    $(".Add").click(function(){
		  $(".formi").eq(0).clone().insertAfter(".formi:last");
//$(".formi:last").clone().insertAfter(".formi:last");
    });
});

.formi{border:1px solid #000;width:50%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
<form class="formi">
<input type="text" placeholder="name"/>
<select name="cars">
<option value="">one</option>
<option value="">two</option>
</select>
<button type="submit">ok</button>
</form>
</div>

这篇关于每次点击jQuery克隆div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！