jquery - 使用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');

        });
    });

但是，这样做是在每次单击按钮时复制表单字段。因此，我单击一次，它将按预期方式一次添加表单字段。再次单击该按钮，它将两次添加表单字段，再次单击，将添加三组表单字段！

我只希望它每次单击一次即可添加一组表单字段。

任何建议将不胜感激！

最佳答案

这是因为复制后，您将拥有两个.grab-me元素。克隆元素后，您应该删除该类：

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