jquery - 使用jquery追加重复克隆隐藏的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');