0

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

我试图让代码为删除按钮工作（对于每组添加的表单字段）但没有成功（尽管在这个站点和谷歌上查看了一些示例）。

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

请参阅下面的代码（特别是以 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>
4

3 回答 3

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")取消绑定现有点击，并将其绑定回来，包括新添加的点击。

于 2013-08-30T21:57:42.013 回答
0

这是删除按钮的工作示例

<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>
于 2013-08-30T22:06:35.123 回答
0

在您制作表格的表格结构中，要删除字段集的锚元素未放置在表格内。所以当它被放入 DOM 时，remove 链接将在 table 之外（要删除的父元素）。

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
于 2013-08-30T21:54:40.173 回答