jQuery clone() 表单提交不按预期工作

jQuery clone() form submit dont work as supposed

当我克隆一个表单并想要提交克隆表单时,它会提交父表单。 我更新了问题。

        $(document).ready(function () {
            $('body').on('click','input[type="submit"]',function(e) {
                        e.preventDefault();
                        console.log($(this).closest('form'));
                        $(this).closest('form').submit();
                     });
             $('#clone').click(function(e) {
                       e.preventDefault();
                       $('#myform_1').clone(true).prop('id', 'myform_2' ).appendTo('.clone');
                     });
             $('[id^="myform_"]').each(function(key, form) {

                 $(form). validate({ //intit plugin
                    rules: {
                        field1: {
                            required: true
                        },
                        field2: {
                            required: true
                        }
                    },
                    submitHandler: function (form) { 
                        alert('valid form submitted'); 
                        return false; 
                    }
                });
             });
         });

http://jsfiddle.net/zMYVq/552/

你可以试试下面的方法,

$(document).ready(function () {
    $('body').on('click','input[type="submit"]',function(e) {
                e.preventDefault();
                console.log($(this).closest('form'));
                $(this).closest('form').submit();
             });
     $('#clone').click(function(e) {
               e.preventDefault();
               $('#myform_1').clone(true).prop('id', 'myform_2' ).appendTo('.clone');
             });

     $(".submit").click(function(){
        $(this).parent().validate({
            rules: {
                field1: {
                    required: true
                },
                field2: {
                    required: true
                }
            },
            submitHandler: function (form) { 
                alert('valid form submitted formId='+$(form).attr("id")); 
                return false; 
            }
        }); 
     });

});

我刚刚为您的提交按钮分配了一个 class

<div class="cl">
<form id="myform_1">
    <input type="text" name="field1" />
    <br/>
    <input type="text" name="field2" />
    <br/>
    <input type="submit" class="submit"/>
</form>
</div>
        function onValidate(val){

           $('#'+val).each(function(key, form) {

                 $(form).validate({ //intit plugin
                    rules: {
                        field1: {
                            required: true
                        },
                        field2: {
                            required: true
                        }
                    },
                    submitHandler: function (form) { 
                        alert('valid form submitted'); 
                        return false; 
                    }
                });
             });
        }

        $(document).ready(function () {
        var i=1;
            $('body').on('click','input[type="submit"]',function(e) {  
                        e.preventDefault();
                        $(this).closest('form').submit();

                     });
             $('#clone').click(function(e) {
                       e.preventDefault();
                       i++;

                       $('#myform_1').clone(false).prop('id','myform_'+i ).appendTo('.clone');
                       onValidate( 'myform_'+i);

                     });


          onValidate("myform_"+i);
         });