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

【问题标题】：jQuery clone() form submit dont work as supposedjQuery clone() 表单提交不按预期工作
【发布时间】：2018-03-29 08:20:21
【问题描述】：

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

        $(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/

【问题讨论】：

请在寻求帮助时以合理、一致的方式格式化和缩进您的代码，这样很难按原样阅读。（无论如何这样做是个好主意。）（这次我已经为你做了。）
stackoverflow.com/a/24637173/2181514 "即使你使用了一个类，各种 jQuery Validate 方法也不能被附加到一次针对多个元素的选择器上。同样，即使你的目标正确地选择了一个元素组，只会使用第一个实例。”
jquery validate doesn't work with multiple forms的可能重复
我根据stackoverflow.com/a/24637173/2181514更改代码但仍然无法正常工作jsfiddle.net/zMYVq/551
您错过了该答案的相关部分：即使您的目标正确选择了一组元素，只会使用第一个实例。 - 元素（不是表单）。

标签： jquery html clone

【解决方案1】：

你可以试试下面的方法，

$(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; 
            }
        }); 
     });

});

我刚刚为你的提交按钮分配了一个类

<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>

【讨论】：

【解决方案2】：

        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);
         });

【讨论】：