Javascript 克隆的jQuery按钮生成的克隆数超出预期

关于溢出的第一个问题，请提前原谅我的任何问题，或者如果我错过了以前的答案。我对jQuery有点陌生，所以我的编码方式可能会有问题。我正在尝试构建一个动态表单，允许我根据用户的需要添加文本输入字段。在我尝试使用克隆按钮添加更多字段之前，它工作得非常好。

我正在使用jQueryUI1.11.2和jQuery1.11.2

HTML代码：

<style>.hiddenForm{display:none};</style>
<form>
    <input id="numentries" class="numspinner" />
    <div class="repeatedForm hiddenForm">
        <input type="button" class="numbutton" value="Add Fields" />
        <div class="repeatedInnerForm hiddenForm">
            <input type="text" placeholder="Gimme information" />
            <input type="text" placeholder="Gimme more information" />
        </div>
    </div>
</form>

<form>
    <input id="numentries" class="numspinner" />
    <div id="hiddenOuterFormTemplate" class="hiddenForm">
        <p class="groupTitle"></p>
        <div class="buttonDiv">
            <input id="addButton" type="button" class="numbutton"  value="Add Fields" />
            <input id="removeButton" type="button" class="numbutton" value="Remove Fields" />
        </div>
    </div>
    <div id="hiddenInnerFormTemplate" class="hiddenForm">
        <input type="text" placeholder="Gimme information" />
        <input type="text" placeholder="Gimme more information" />
    </div>
</form>

---

我想它只显示一组文本字段为每个按钮按下，并关联文本字段与按钮被按下。我认为这与按钮的最初克隆有关。欢迎对代码风格提出任何意见或建设性的批评。

我不能100%确定这是否符合您的期望，但我更改了您的代码，根据输入值添加了字段数：

var fieldCount = 0;
var formCount = 0;

$(".numspinner").spinner({
    min:1,
    spin:function(event, ui){fieldCount = ui.value;}
});

$(".numbutton").button().click(function(event){
    for(var i = 0; i < fieldCount; i++){
        formCount++;
        var newForm = $(".repeatedInnerForm")
            .clone()
            .attr('id', 'form'+formCount)
            .removeClass("repeatedInnerForm")
            .insertAfter(this);
    }
});

var fieldCount=0；
var-formCount=0；
$（“.numspinner”）.spinner({
民:1,，
自旋：函数（事件，ui）{fieldCount=ui.value；}
});
$（“.numbutton”）.button（）。单击（函数（事件）{
对于（变量i=0；i

对于此HTML

<form>
    <input id="numentries" class="numspinner" />
    <input type="button" class="numbutton" value="Add Fields" />
    <div class="repeatedForm hiddenForm">
        <div class="repeatedInnerForm">
            <input type="text" placeholder="Gimme information" />
            <input type="text" placeholder="Gimme more information" />
        </div>
    </div>
</form>

---

首先，JSFIDLE仅通过https排除外部资源。是获取js和css库文件的https链接的好地方

由于您在两个位置克隆输入，因此将获取重复的字段。首先，当

diff==1

时，它在（'spin'）上克隆它们，然后再次在

中单击

函数。我编辑了您的代码，在（'spin'）上克隆了一次输入，然后在

上单击

显示输入。这是一张工作票

---

改变代码的工作方式也是一个好主意。因为只有用户单击相应的“添加更多”按钮，才会显示字段。最好是在

旋转

上添加按钮，然后在

单击

上添加输入。这样你就不会在用户没有请求的情况下创建元素。

好的，你的评论非常有用@craig，@ted，非常感谢

工作

HTML代码：

<style>.hiddenForm{display:none};</style>
<form>
    <input id="numentries" class="numspinner" />
    <div class="repeatedForm hiddenForm">
        <input type="button" class="numbutton" value="Add Fields" />
        <div class="repeatedInnerForm hiddenForm">
            <input type="text" placeholder="Gimme information" />
            <input type="text" placeholder="Gimme more information" />
        </div>
    </div>
</form>

<form>
    <input id="numentries" class="numspinner" />
    <div id="hiddenOuterFormTemplate" class="hiddenForm">
        <p class="groupTitle"></p>
        <div class="buttonDiv">
            <input id="addButton" type="button" class="numbutton"  value="Add Fields" />
            <input id="removeButton" type="button" class="numbutton" value="Remove Fields" />
        </div>
    </div>
    <div id="hiddenInnerFormTemplate" class="hiddenForm">
        <input type="text" placeholder="Gimme information" />
        <input type="text" placeholder="Gimme more information" />
    </div>
</form>

---

再次感谢

你要克隆他们两次。首先在on spin函数中，然后再次在button click函数中。使用httpsThanks更新了JSFIDLE。。。我可能最终会做一个类似的解决方案，但事实并非如此。我需要多组文本字段和多个添加字段按钮。谢谢https链接。第一次也会扔一个JSFIDLE+1.我认为它已经在spin上添加了按钮，在click上添加了字段。我需要能够添加多个按钮，每个按钮都有一组用户定义的文本字段。我会投票支持你，但我没有投票的理由……没问题。听起来这能做你需要的吗？如果没有，我很乐意更新我的答案

var totalgroups = 0;

$(".numspinner").spinner({min:1});
$(".numspinner").on("spin",function(event, ui){
    var oldvalue = $(this).val();
    var newvalue = ui.value;
    var diff = newvalue - oldvalue;
    if(newvalue >= 1){
        if(diff == 1){
            var newForm = $("#hiddenOuterFormTemplate").clone(true);
            newForm.removeClass("hiddenForm");
            totalgroups++;
            newForm.attr("id","outerForm"+newvalue);
            newForm.addClass("outerFormDiv");
            newForm.find(".groupTitle").text("Group "+newvalue + ":");
            newForm.appendTo("form");
        }else if(diff == -1){
            $("#outerForm"+oldvalue).remove();
            totalgroups--;
        }
    }
});
$(".numbutton").button();
$("#addButton").click(function(event){
    var buttonclicked = $(this);
    var newForm = $("#hiddenInnerFormTemplate").clone();
    newForm.removeClass("hiddenForm");
    newForm.addClass("dynamicTextfields")
    newForm.insertAfter(buttonclicked.parent(".buttonDiv"));
});
$("#removeButton").click(function(event){
      var buttonclicked = $(this);
      var buttonouterForm = buttonclicked.parents(".outerFormDiv");
      buttonouterForm.find(".dynamicTextfields:last").remove();         
});