jQuery clone div каждый раз по нажатию

Question

У меня простая форма и кнопка для клонирования моей формы при нажатии. Проблема в том, что когда я нажимаю кнопку в первый раз, она работает правильно, но в течение последующих раз она добавляет много divs при нажатии. Есть ли способ копировать один за другим каждый раз при нажатии? вот мой сниппет:

$(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>

Answer 1

Вы можете найти первую форму вместо того, чтобы найти все в DOM с помощью eq(0) или найти недавно один,

$(document).ready(function(){ 
 
    $(".Add").click(function(){ 
 
\t \t $(".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>

Answer 2

$(".formi").clone(). клоны все .formi элемент доступен на странице. Вам нужно только клонировать первый элемент .formi, а не .formi, которые были добавлены через шаблон.

$(".Add").click(function(){ 
    var $formTemplate = $(".formi:first"); 
    $formTemplate.clone().insertAfter(".formi:last"); 
}); 

Answer 3

Вы должны клонировать только первый, используя метод .eq(), которые уменьшают набор соответствующих элементов к одному по указанному индексу.

Пожалуйста, попробуйте следующее:

$(".formi").eq(0).clone().insertAfter(".formi:last"); 

Ссылки:

• eq method

$(document).ready(function() { 
 
    $(".Add").click(function() { 
 
    $(".formi").eq(0).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>

Answer 4

$(document).ready(function(){ 
 
    $(".Add").click(function(){ 
 
\t \t $(".formi").eq(0).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>

Answer 5

$(document).ready(function() { 
 
    $(".Add").click(function() { 
 
    $(".formi:nth-child(1)").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>

1. Добавить :nth-child(1), чтобы вы только клонировали первый.

Answer 6

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

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>

Answer 7

Применение :nth-child(1)

$(document).ready(function(){ 
 
    $(".Add").click(function(){ 
 
\t \t $(".formi:nth-child(1)").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>

Answer 8

Использование first(), Метод first() возвращает первый элемент выбранного эл ements.

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

 
    }); 
 
});

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

<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> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Answer 9

Я Ответил, где вы делаете ошибку, и то, что будет возможным решением этой

$(document).ready(function() { 
$(".Add").click(function() { 
//Mistake : when you are clicking second time, you clone both the forms having class '.formi' 
$(".formi").clone().insertAfter(".formi:last"); 

// $(".formi:nth-child(1)").clone().insertAfter(".formi:last"); : This one will work 

    }); 
});