Клонирование и вставка элемента более одного раза - PullRequest
Новая
       4

Клонирование и вставка элемента более одного раза

0 голосов
/ 19 декабря 2011

Вероятно, это общая проблема, но я ищу помощь как в ее устранении, так и в понимании.

Я делаю форму, которая позволяет вам добавлять больше полей. Вот урезанная версия:

HTML 

<div class="to_copy">
<p>Here is an empty form field.</p>
    <input name="input" />
</div>
<a href="#" id="copy">Copy</a>

JQuery 

$(document).ready(function() {
    var to_copy = $(".to_copy").clone();

    $("#copy").on("click", function(e) {
       // Some unwritten code to change name="input" to name="input1"

       $(this).before(to_copy); 
       e.preventDefault();    
    });

});

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

Может кто-нибудь объяснить, почему это не работает, а также указать мне в правильном направлении.

Моим следующим этапом будет изменение имен полей, чтобы к ним добавлялся номер (т. Е. Input, input1, input2 и т. Д.), Возможно, объясняя, почему я выбрал этот подход.

Вот живая версия: http://jsfiddle.net/nGmYb/1/

Ответы [ 2 ]

4 голосов
/ 20 декабря 2011

Проблема в том, что вы присоединяете клон к DOM в событии click. На втором клике вы повторно добавляете элемент в DOM. Вместо этого попробуйте следующее: 

$(document).ready(function() {
    var to_copy = $(".to_copy").clone();

    $("#copy").on("click", function(e) {
        e.preventDefault();
        $(this).before(to_copy.clone());
    });

});
1 голос
/ 20 декабря 2011

Как только вы один раз клонировали элемент DOM, у вас есть одна копия.Когда вы используете .before с ним, он добавляется;когда вы дважды используете .before, он перемещается.

Решение состоит в том, чтобы просто клонировать его повторно: 

$(document).ready(function() {
    $("#copy").on("click", function(e) {
       var to_copy = $(".to_copy").last().clone();
       $(this).before(to_copy); 
       e.preventDefault();    
    });
});

http://jsfiddle.net/mblase75/nGmYb/5/

...