Question

我正在开发一个网站来添加，验证和删除表单字段集（以单一形式）。

我尝试让代码适用于删除按钮（对于每个添加的表单字段集），但没有成功（尽管在此站点和谷歌上查看了一些示例）。

我知道删除按钮的相关代码出错了吗？

请参阅下面的代码（特别是以form.find ...

开头的代码

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" > </script>   
    <script type="text/javascript" src="js/jquery.validate.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            var wrapper = $("#wrapper");
            var addForm = $("#add-form");
            var index = 0;

            $("#myForm").validate({
                errorPlacement: function(error, element) {
                    error.insertAfter(element);
                    //$(element).next().after(error);
                    //error.appendTo( element.parent().next() );
                },
                rules: {} //rules
            }); //validate()

            var getForm = function(index, action) { //returns set of form fields as a string
            return $('\
                <table>\
                <tr>\
                <td> Name </td> <td> Email </td> <td> Phone </td>\
                </tr>\
                <tr>\
                <td> <input id="name' + index + '" name="name' + index + '" /></td>\
                <td><input id="email' + index + '" name="email' + index + '" /></td>\
                <td><input id="phone' + index + '" name="phone' + index + '" /></td>\
                </tr>\
                <a href="#" class="remove">remove fieldset</a>\
                </table>\
                ');
            }//getForm()

            addForm.on("click", function() {
                var form = getForm(++index)
                form.find(".remove").on("click", function() {
                    $(this).parent().remove();
                }); //form.find()
                $("#wrapper").append(form);
                $("#email"+index).rules("add", { required:true,email:true });
            }); //addForm.on()

        }); //$(document).ready
    </script>


</head>
<body>
    <form id="myForm" name="myForm" action="" method="post" autocomplete="on">
        <div id="wrapper"></div>
        <a href="#" id="add-form">add fieldset</a>
        <input type="submit" value="Save">
    </form>
</body>
</html>

Answer 1

更改

form.find(".remove").on("click", function() {
   $(this).parent().remove();
}); //form.find()
$("#wrapper").append(form);

到

$("#wrapper").append(form);
$(".remove").unbind("click").on("click", function() {
   $(this).parent().remove();
}); //form.find()

您需要将表单放在DOM中，因此在执行之前无法绑定。我还更改为使用$(".remove")取消绑定现有点击，并将其绑定回来，包括在新添加的点击中。

Answer 2

在要创建表单的表结构中，删除字段集的锚元素不会放在表中。因此，当它被放入DOM时，删除链接将在表格之外（要删除的父元素）。

http://jsfiddle.net/SG7fG/1/

   $(document).ready(function(){
        var wrapper = $("#wrapper");
        var addForm = $("#add-form");
        var index = 0;

        $("#myForm").validate({
            errorPlacement: function(error, element) {
                error.insertAfter(element);
                //$(element).next().after(error);
                //error.appendTo( element.parent().next() );
            },
            rules: {} //rules
        }); //validate()

        var getForm = function(index, action) { //returns set of form fields as a string
        return $('\
            <div>\
            <table>\
            <tr>\
            <td> Name </td> <td> Email </td> <td> Phone </td>\
            </tr>\
            <tr>\
            <td> <input id="name' + index + '" name="name' + index + '" /></td>\
            <td><input id="email' + index + '" name="email' + index + '" /></td>\
            <td><input id="phone' + index + '" name="phone' + index + '" /></td>\
            </tr>\
            </table>\
            <a href="#" class="remove">remove fieldset</a>\
            </div>\
            ');
        }//getForm()

        addForm.on("click", function() {
            var form = getForm(++index)

            $("#wrapper").append(form);
            $("#email"+index).rules("add", { required:true,email:true });
            $(".remove").on("click", function() {
                $(this).parent().remove();
            }); //form.find()
        }); //addForm.on()

    }); //$(document).ready

Answer 3

以下是删除按钮的工作示例

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" > </script>   
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            var wrapper = $("#wrapper");
            var addForm = $("#add-form");
            var index = 0;

            $("#myForm").validate({
                errorPlacement: function(error, element) {
                    error.insertAfter(element);
                },
                rules: {}
            });

            var getForm = function(index, action) {
            return $('\
                <table id="tbl' + index +'">\
                <tr>\
                <td> Name </td> <td> Email </td> <td> Phone </td>\
                </tr>\
                <tr>\
                <td> <input id="name' + index + '" name="name' + index + '" /></td>\
                <td><input id="email' + index + '" name="email' + index + '" /></td>\
                <td><input id="phone' + index + '" name="phone' + index + '" /></td>\
                </tr>\
                <a href="#" id="remove-form' + index + '" data-index="' + index + '">remove fieldset</a>\
                </table>\
                ');
            }

            addForm.on("click", function() {
                var form = getForm(++index)
                form.find(".remove").on("click", function() {
                    $(this).parent().remove();
                }); //form.find()
                $("#wrapper").append(form);
                $("#email"+index).rules("add", { required:true,email:true });

                $("#remove-form"+index).on("click", function() {
            var currentIndex = $(this).data( "index" );
                    $("#tbl" + currentIndex).remove();
                });
            });

        }); //$(document).ready
    </script>


</head>
<body>
    <form id="myForm" name="myForm" action="" method="post" autocomplete="on">
        <div id="wrapper"></div>
        <a href="#" id="add-form">add fieldset</a>
        <input type="submit" value="Save">
    </form>
</body>
</html>

删除动态创建的表单字段的按钮

3 个答案: