Используйте jquery append для повторного клонирования скрытого html

У меня есть форма, и мне нужно, при желании, повторять (клонировать и добавлять) большой блок полей формы снова и снова.

Итак, я поместил в страницу скрытый div с кодом, который я хотел бы скопировать внутрь, а затем я хочу, чтобы пользователь имел возможность нажать кнопку с надписью «добавить» и это добавляет эти пустые поля формы под последний лот столько раз, сколько они хотят.

HTML, который я хочу клонировать, выглядит следующим образом:

 <div style="display: none;">
        <div class="grab-me">
          <input name="foo[]" />
          <input name="bar[]" />
          <input name="oth[]" />
        </div>
 </div>

На данный момент у меня есть jquery:

$(function(){
        $('.add-member').live("click", function(e){
            e.preventDefault(e);
            var grab = $('.grab-me');
            grab.appendTo('#register');

        });
    });

Но то, что это делает, дублирует поля формы при каждом нажатии кнопки. Поэтому я нажимаю один раз, он добавляет поля формы один раз, как и ожидалось. Нажмите кнопку еще раз, она добавляет поля формы дважды, на этот раз, нажмите еще раз, она добавляет три набора полей формы в!

Я просто хочу, чтобы он добавлял один набор полей формы за один клик.

Любой совет будет принят с благодарностью!

4 голоса | спросил John 11 MarpmMon, 11 Mar 2013 16:50:19 +04002013-03-11T16:50:19+04:0004 2013, 16:50:19

2 ответа


0

Это потому, что после копирования у вас есть два элемента .grab-me. Вы должны удалить класс после клонирования элемента:

var grab = $('.grab-me')
    .clone()
    .removeClass('grab-me')
    .appendTo('#register');
ответил Ja͢ck 11 MarpmMon, 11 Mar 2013 17:02:51 +04002013-03-11T17:02:51+04:0005 2013, 17:02:51
0

$ ('. grab-me'). eq (0), чтобы получить только одну форму (первая форма с классом grab-me)

$(function(){
        $('.add-member').live("click", function(e){
            e.preventDefault(e);
            var grab = $('.grab-me').eq(0);
            grab.appendTo('#register');

        });
    });
ответил Pablo Castaño 11 MarpmMon, 11 Mar 2013 16:58:06 +04002013-03-11T16:58:06+04:0004 2013, 16:58:06

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132