使用jquery append重复克隆隐藏的html

Question

我有一个表单,我需要一遍又一遍地重复(克隆和追加)一大块表单字段.

所以,我所做的是在页面中放入一个隐藏的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');

        });
    });

但是,正在做的是在每次单击按钮时复制表单域.所以我点击一次,它按预期添加一次表单字段.再次单击该按钮,它会在此时添加两次表单域,再次单击,它会添加三组表单域!

我只想让它在每次点击时一次添加一组表单字段.

任何建议都会非常感激!

Answer 1

那是因为一旦它被复制,你就有了两个.grab-me元素.您应该在克隆元素后删除该类:

var grab = $('.grab-me')
    .clone()
    .removeClass('grab-me')
    .appendTo('#register');