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

Posted 2023-02-22

【中文标题】使用jquery append重复克隆隐藏的html

【英文标题】：Use jquery append to clone hidden html repeatedly

【发布时间】：2013-02-26 15:44:26

【问题描述】：

我有一个表单，我需要有选择地一遍又一遍地重复（克隆和附加到）一大块表单域。

所以，我所做的是将我想要复制的代码放在页面中的一个隐藏 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');

        );
    );

但是这样做是在每次单击按钮时复制表单字段。所以我点击一次，它按预期添加了一次表单字段。再次点击按钮，这次添加了两次表单域，再次点击，添加了三组表单域！

我只希望它在每次点击时一次性添加一组表单字段。

任何建议都将非常感激！

【问题讨论】：

不要再使用.live()，它已被弃用。请改用.on()，但请先阅读文档。

谢谢杰克，我很清楚这一点，但客户使用的是 1.6.3 并且不希望更改。

【参考方案1】：

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

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

【参考方案2】：

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

        );
    );

【讨论】：

这只会添加一次html，然后就不能再工作了。谢谢你的回复！

【参考方案3】：

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

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

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

【讨论】：

它仍然有同样的问题，就是每次按下它时都比它应该多添加一组。感谢您的回复！

或者把最后一行改成$("#register .grab-me").removeClass("grab-me");。比克隆更容易:)

你知道，这是我的第一个答案！但后来我觉得最好只抓住第一个项目。

@John 真的吗？它应该只从列表中获取一个元素。这很奇怪。

上面的当前代码块只添加了一次html。随后的点击什么也不做。奇数。