JQuery .clone() и .appendTo(), вызывающие несколько приложений

Итак, я прочитал множество подобных вопросов и ответов - ни один из них не рассматривает эту конкретную проблему. Так вот.JQuery .clone() и .appendTo(), вызывающие несколько приложений

Рассмотрим следующий код:

<body> 
<script> 

    function addAttendee() { 
     $('.newAttendee').clone().appendTo('.attendees'); 
    } 

</script> 

<form action="test2.php" name="testform" method="post"> 
    <span class="attendees"> 
    <input type="text" name="attendee[0][city]" value="city 1"> 
    <input type="text" name="attendee[0][state]" value="state 1"> 
    <input type="text" name="attendee[0][zip]" value="zip 1"> 
    </span> 
<a href="#" name="addAttendee" onclick="addAttendee()">Add Attendee</a> 
<br> 
<input type="submit" onclick="getOutput()"> 
</form> 

<div class="hideThis" style="display: none;"> 
    <span class="newAttendee"> 
     <br> 
    <input type="text" name="attendee[1][city]" value="city 2"> 
    <input type="text" name="attendee[1][state]" value="state 2"> 
    <input type="text" name="attendee[1][zip]" value="zip 2"> 
    </span> 
</div>

Когда я нажимаю «Добавить Attendee» в первый раз, я получаю то, что хочу. Но каждый последующий щелчок по этой ссылке приводит к удвоению предыдущих вставленных разделов. Первый щелчок 1, второй 2, третий 4 и т. Д.

Я что-то упустил?

Спасибо всем заблаговременно.

источник

2016-03-19 Lee Fuller

Поскольку $('.newAttendee').clone() клонирует все элементы с этим классом

Попробуйте использовать first() или last() только один клон из них

$('.newAttendee').first().clone().appendTo('.attendees');

источник

2016-03-19 16:02:12 charlietfl

Вы можете лучше использовать $ ('. NewAttendee'). Clone() .. removeClass ('newAttendee'). AppendTo ('. Attendees'); –

@SideriteZackwehdex, но это может повлиять на css или другой код. Очень просто клонировать один из них. – charlietfl

Я думаю, что намерение кода состояло в том, чтобы не добавлять промежутки с классом newAttendee, а использовать его только как шаблон. Если нет, тогда вы правы. –

Это потому, что $('.newAttendee') выбрать все элементы, с классом newAttendee. И после того, как вы клонируете его, у вас есть 2 и так далее. Изменение класса после клонирования позволит избежать этого.

источник

2016-03-19 16:03:21

JQuery .clone() и .appendTo(), вызывающие несколько приложений

ответ

Смежные вопросы