Question

我的jquery代码有问题。我有一个带有fieldset的表单，其中有很多表单字段。点击一个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());
  });
});

动态添加带子项的fieldset

1 个答案: