Question

我有三个单选按钮，每个按钮的选择会改变#show div中的内容。当页面加载时，div包含一个dinamic形式，它的作品是完美的。在我选择其中一个单选按钮并返回到表单情况后，动态表单不会添加更多字段。

我是JS的新手，我无法发现问题。任何帮助都会很棒。

我不确定这是什么问题任何更好的问题标题的建议都将被接受

这是动态字段函数

$(document).ready(function () {
        $("#addm").click(function () {
            var intIdm = $("#buildyourformm div").length + 1;
            var fieldWrapper = $("<div class=\"fieldwrapper\" name=\"field[]\" id=\"fieldm" + intIdm + "\"/>");
            var wfnamem = $("<div class=\"col-sm-5\"> <input type=\"text\" placeholder=\field 1\"  name=\"inputwFname[]\" class=\"form-control\"></div>\" ");
            var wlnamem = $("<div class=\"col-sm-5\"> <input type=\"text\" placeholder=\"field 2\"  name=\"inputwLname[]\" class=\"form-control\"></div>\" ");


            var removeButtonm = $("<input type=\"button\" class=\"remove-btn btn-warning\" value=\"remove\" />");
            removeButtonm.click(function () {
                $(this).parent().remove();
            });

            fieldWrapper.append(wfnamem);
            fieldWrapper.append(wlnamem);
            fieldWrapper.append(removeButtonm);
            $("#buildyourformm").append(fieldWrapper);
        });
    });

这是我已经完成的链接

http://jsfiddle.net/davseveloff/ca7gvrkp/

Answer 1

问题是你没有在添加按钮上委托一个点击处理程序，所以当你绘制dom（删除追加）时，对特定id的绑定将无法工作，因为你删除了元素我也将点击处理程序合并到你的准备好的功能，你不需要两个就绪功能

$(document).ready(function(){
        $('input[type=radio]').change(function(){
        var n = $(this).val();
        switch(n)
        {
                case '1':
                      $('#show').html('<fieldset id="buildyourformm"><div name="field1" id="field1"><div><input type="text" placeholder="field 1"  name="inputwFname[]"></div><div><input type="text" placeholder="field 2" name="inputwLname[]" class="form-control"></div><input type="button"  value="remove"></div></fieldset><input type="button" value="add" id="addm" /><br><br><br></div></div></div></fieldset>');
                      break;
                case '2':
                      $('#show').html("2nd radio button");
                      break;
                case '3':
                      $('#show').html("3rd radio button");
                      break;
            }
        });


            $("#show").on("click","#addm",function (event) {
                var intIdm = $("#buildyourformm div").length + 1;
                var fieldWrapper = $("<div class=\"fieldwrapper\" name=\"field[]\" id=\"fieldm" + intIdm + "\"/>");
                var wfnamem = $("<div class=\"col-sm-5\"> <input type=\"text\" placeholder=\field 1\"  name=\"inputwFname[]\" class=\"form-control\"></div>\" ");
                var wlnamem = $("<div class=\"col-sm-5\"> <input type=\"text\" placeholder=\"field 2\"  name=\"inputwLname[]\" class=\"form-control\"></div>\" ");


                var removeButtonm = $("<input type=\"button\" class=\"remove-btn btn-warning\" value=\"remove\" />");
                removeButtonm.click(function () {
                    $(this).parent().remove();
                });

                fieldWrapper.append(wfnamem);
                fieldWrapper.append(wlnamem);
                fieldWrapper.append(removeButtonm);
                $("#buildyourformm").append(fieldWrapper);
            });
    });

请注意，这不适用于jquery 1.6，如果你真的需要使用这个旧版本，请将.on更改为.live

这是一个工作小提琴

http://jsfiddle.net/ca7gvrkp/5/

Answer 2

这是因为，您的文档就绪功能首次将事件处理程序附加到UI按钮，但是当您选择另一个单选按钮并再次返回到表单时，虽然它看起来是相同的表单，但它是不。因为根据您的代码，基于单选按钮，您将再次呈现控件。但这一次，文件准备就绪不会被执行，因为它实际上并不是刷新。

我已经修改了你的代码，检查这个小提琴

$(document).ready(function(){
    $('input[type=radio]').change(function(){
    var n = $(this).val();
    switch(n)
    {
            case '1':
                  $('#show').html('<fieldset id="buildyourformm"><div name="field1" id="field1"><div><input type="text" placeholder="field 1"  name="inputwFname[]"></div><div><input type="text" placeholder="field 2" name="inputwLname[]" class="form-control"></div><input type="button"  value="remove"></div></fieldset><input type="button" value="add" id="addm" /><br><br><br></div></div></div></fieldset>');
                  tieEvents();
                  break;
            case '2':
                  $('#show').html("2nd radio button");
                  break;
            case '3':
                  $('#show').html("3rd radio button");
                  break;
        }
    });
});




$(document).ready(function () {
    tieEvents();
        });

function tieEvents() {
    $("#addm").click(function () {
            var intIdm = $("#buildyourformm div").length + 1;
            var fieldWrapper = $("<div class=\"fieldwrapper\" name=\"field[]\" id=\"fieldm" + intIdm + "\"/>");
            var wfnamem = $("<div class=\"col-sm-5\"> <input type=\"text\" placeholder=\field 1\"  name=\"inputwFname[]\" class=\"form-control\"></div>\" ");
            var wlnamem = $("<div class=\"col-sm-5\"> <input type=\"text\" placeholder=\"field 2\"  name=\"inputwLname[]\" class=\"form-control\"></div>\" ");


            var removeButtonm = $("<input type=\"button\" class=\"remove-btn btn-warning\" value=\"remove\" />");
            removeButtonm.click(function () {
                $(this).parent().remove();
            });

            fieldWrapper.append(wfnamem);
            fieldWrapper.append(wlnamem);
            fieldWrapper.append(removeButtonm);
            $("#buildyourformm").append(fieldWrapper);
        });

}

http://jsfiddle.net/ca7gvrkp/6/

JS使用来自两个不同来源的函数

2 个答案: