【问题标题】:Dynamic input fields creation is not working. Why?动态输入字段创建不起作用。为什么?
【发布时间】:2018-02-28 04:33:13
【问题描述】:

提前问好。我是网络开发的新手,遇到了一个问题。我正在创建一个我想要可变数量的输入字段的表单。因此,我尝试通过一些在线资源的帮助来创建动态输入字段创建。我已经尝试了我能想象到的一切,但代码不起作用。

到目前为止,我已经编写了以下代码:index.html

<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<header>Dynamic Add Input Fields</header>
    <form name="form1" id="form1">
        <table class="table table-bordered" id="dynamic_field">
            <tr>
                <td><input type="text" name="name[]" id="name" class="form-control name_list"/></td>
                <td><input type="button" name="add" id="add" class="btn btn-success" value="ADD"></td>
            </tr>
        </table>
        <input type="button" name="submit" id="submit" value="Submit"/>
    </form>
    <script type="text/javascript" >
    $(document).ready(function () {
        var i = 1;
        $('#add').click(function () {
            i++;
            $('#dynamic_field').append('<tr id="row'+i+'"><td><input id="name" type="text" name="name[]" class="form-control name_list"/></td><td><input type="button" name="remove" id="row'+i+'" class="btn_remove" Value="X" /></td></tr>'); 
        });
        $('.btn_remove').on('click','.btn_remove',function () {
            var button_id = $(this).attr("id");
            $("#row"+button_id+"").remove();
        });

});
</script>

</body>
</html>

现在当我运行这段代码时,输​​出就会出现:

动态添加输入字段 [输入字段] [添加按钮] [提交按钮]

所以当我点击“添加”按钮时,它应该会再添加一个输入字段并在其旁边添加一个“删除”按钮。

但是如果我点击“添加”按钮,什么都不会发生,只是 URL 发生了变化。

【问题讨论】:

  • 什么不完全有效?
  • 你的问题是什么?\
  • 我猜你没有看你的错误控制台。将您指向错误method = "POST",
  • 我已经编辑了我的问题...请检查@epascarello
  • 上面的评论告诉你为什么它不起作用。请让自己在 IDE 中内置一个好的 linter。它会告诉你这些问题作为你的类型。 ESLint、JSLint JSHint 等

标签: javascript jquery html ajax dynamic


【解决方案1】:

您需要为每个新项目添加事件处理程序

$('#dates').append(
    $('<div class="'+classname+'">'+dd+'<br /><span class="month_selector">'+dm+'</span></div>')
    .click(function(){
      // handle click
    })
);

jQuery: adding event handler to just created element

【讨论】:

    猜你喜欢
    • 2023-03-16
    • 2017-12-19
    • 2020-02-15
    • 1970-01-01
    • 1970-01-01
    • 2020-01-13
    • 2020-08-19
    • 2017-04-23
    • 2020-06-18
    相关资源
    最近更新 更多