克隆的 jQuery 按钮比预期的克隆更多

Question

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

我使用的是 jquery-ui 1.11.2 和 jquery 1.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>

Javascript

$(".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 = $(".repeatedForm").clone(true);
        newForm.removeClass("repeatedForm");
        newForm.removeClass("hiddenForm");
        newForm.attr("id","innerForm"+newvalue);
        newForm.appendTo("form");
    }else if(diff == -1){
        $("#innerForm"+oldvalue).remove();
    }
}
});
$(".numbutton").button();
$(".numbutton").click(function(event){
    var buttonclicked = $(this);
    var newForm = $(".repeatedInnerForm").clone();
    newForm.removeClass("repeatedInnerForm");
    newForm.removeClass("hiddenForm");
    newForm.insertAfter(buttonclicked);
});

JSFiddle

我希望它只为每次按下按钮显示一组文本字段，并将文本字段与被按下的按钮相关联。我认为这与按钮的初始克隆有关。感谢您对代码风格提出任何意见或建设性批评。

Answer 1

好的，所以你的 cmets 非常有帮助@craig，@ted 非常感谢你。

工作JSFiddle

HTML 代码：

<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>

我决定让它们分开元素以避免多副本问题，然后使用 jQuery 在页面上根据需要定位它们。

Javascript 下面

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

再次感谢...

Answer 2

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

您得到重复的字段，因为您在两个地方克隆了输入。首先它在diff == 1 时克隆它们on('spin')，然后在你的click 函数中再次克隆它们。我编辑了您的代码以克隆输入一次on('spin')，然后在click 上显示输入。这是一个有效的fiddle

$(".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 = $(".repeatedForm").clone(true);
            newForm.removeClass("repeatedForm");
            newForm.removeClass("hiddenForm");
            newForm.attr("id","innerForm"+newvalue);
            newForm.appendTo("form");
        }else if(diff == -1){
            $("#innerForm"+oldvalue).remove();
        }
    }
});
$(".numbutton").button();
$(".numbutton").click(function(event){
    var form = $(this).siblings('.hiddenForm');
    form.removeClass('repeatedInnerForm');
    form.removeClass('hiddenForm');
});

反转代码的工作方式可能也是一个好主意。由于在用户单击相应的“添加更多”按钮之前不会显示这些字段。最好在spin 上添加按钮，然后在click 上添加输入。这样你就不会在用户没有请求时创建元素。

Answer 3

我不能 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);
    }
});

对于这个 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>

See it in action here