jQuery clone div每次点击 [英] jQuery clone div everytime clicked

问题描述

我有一个简单的表单，并有一个按钮克隆我的表单时点击。问题是，当我第一次点击按钮，它工作正常，但下次，它附加许多divs单击。有没有办法复制一个一个，每次点击？
这里是我的代码片段：

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>

推荐答案

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

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 clone div每次点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！