jquery - 动态添加带有子项的字段集

Question

我的 jquery 代码有问题。我有一个带有字段集的表单，其中有许多表单字段。单击一个 div 后，我需要添加另一个字段集，包括具有相同属性的子项。当我第一次单击 div 时，一切看起来都很好，但是在第二次单击时，什么也没有发生。第三次单击时，有四个字段集，第四次单击时有 8 个，依此类推。不知道哪里有问题

html

<form>
  <fieldset class=fieldsett>
    <input>
    <input>
  </fieldset>
<div id="insert">Insert</div>
</form>

jQuery

$(document).ready(function() {    
var fieldset_parent = $(".fieldsett").eq(0).clone();
        $("div#insert").click(function(){
           $(".fieldsett").after(fieldset_parent);
        });
});

非常感谢你的帮助

Answer 1

jquery after 方法在选择器中的每个元素之后附加参数化的内容。

所以

$(".fieldsett").after(fieldset_parent);

在每个项目之后以指数方式附加内容。

试试这个：

$(".fieldsett:last").after(fieldset_parent);

有关 after 方法的信息，请参阅http://api.jquery.com/after/，该方法具有以下描述：

在匹配元素集中的每个元素之后插入由参数指定的内容

编辑：我刚刚注意到这仍然存在项目消失的问题，我认为这与 jquery 如何将克隆的元素附加到 DOM 有关。为了解决这个问题，我会在每次追加时克隆克隆，这样每次都会向 DOM 添加一个唯一元素。

$(function() {    
  var fieldset_parent = $(".fieldsett:eq(0)").clone();
  $("div#insert").click(function(){
    $(".fieldsett:last").after($(fieldset_parent).clone());
  });
});