动态添加fieldset与儿童

我有我的jQuery代码的问题。我有一个带有fieldset的表单，其中有很多表单域。点击一个div后，我需要添加另一个字段集，包括具有相同属性的childrens。当我第一次点击div时，一切看起来都不错，但第二次点击时，什么也没有发生。第三次点击时，有四个字段集，第四次点击8，等等。我不知道在哪里出了问题动态添加fieldset与儿童

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); 
     }); 
});

非常感谢您的帮助

来源

2013-06-29 scooti

一旦你有'.fieldset'和一次'.fieldsett' –

谢谢..这只是错误在这里..在我的源代码中没有问题。 – scooti

方法后，jQuery的附加在每一个元素后的参数化内容选择。

所以

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

成倍追加每个项目后的内容。

尝试此代替：

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

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

插入内容，由参数指定的，该组中的匹配的每个元素之后元素

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

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

来源

2013-06-29 10:44:57 boniestlawyer

非常感谢boniestlawyer。太奇妙了！ – scooti

有一个问题..它不工作在IE ..我在IE9和Firefox IE浏览器中测试ID具有相同的结果..点击按钮后没有任何反应 – scooti

我看了IE10（只有一个可用的时刻），并按照以下方式正常工作：http://jsbin.com/ovufuh/3/edit，这是一个新问题吗？ – boniestlawyer

动态添加fieldset与儿童

回答

相关问题