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

Answer 2

您可以做几件事，我想到的最简单的方法是添加 .first() 调用：

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

您遇到的问题是在您第一次添加它之后，您最终会得到两个具有 .grab-me 类的 div，因此您的 jquery 会同时抓取两者。

Answer 3

$('.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');

        });
    });