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;
}
});
});
});
你可以试试下面的方法,
$(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);
});
当我克隆一个表单并想要提交克隆表单时,它会提交父表单。 我更新了问题。
$(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;
}
});
});
});
你可以试试下面的方法,
$(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);
});