0

フォーム フィールドのセットを (単一のフォームで) 追加、検証、および削除する Web サイトを開発しています。

(追加されたフォーム フィールドのセットごとに) 削除ボタンのコードを機能させようとしましたが、成功しませんでした (このサイトと Google でいくつかの例を見たにもかかわらず)。

削除ボタンの関連コードでどこが間違っているのか考えていますか?

以下のコードを参照してください (特に、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 に答える