jQuery克隆表单后提交克隆表单却触发原表单提交的问题

嘿，我看了你的代码，明白为啥克隆后的表单提交会触发原表单了——主要是克隆时的事件复制和Validate插件实例绑定的问题，咱们一步步来解决：

问题出在哪？ #

你遇到的核心问题有两个：

1. 事件与插件实例的“绑定残留”：你用了clone(true)，这个参数会把原表单的所有事件绑定、数据都复制过去，但jQuery Validate的验证实例是和原表单DOM元素一对一绑定的，克隆后的表单并没有自己的Validate实例，提交时就会误触发原表单的验证逻辑。
2. 提交事件的循环触发风险：你先在按钮点击事件里阻止默认行为，然后又手动调用表单的submit()方法，这会再次触发submit事件，很容易导致逻辑混乱，甚至串到原表单的绑定逻辑上。

修正后的代码方案 #

直接上调整后的代码，关键地方我会标注说明：

$(document).ready(function () {
    // 换个方式监听表单提交：直接监听表单的submit事件，更符合原生逻辑
    $('body').on('submit', '[id^="myform_"]', function(e) {
        e.preventDefault();
        console.log('当前提交的表单是:', this);
        
        // 先验证当前表单是否合法（依赖Validate实例）
        if ($(this).valid()) {
            // 这里写验证通过后的逻辑，比如AJAX提交或者其他操作
            console.log('表单验证通过，准备提交');
        }
    });

    // 克隆按钮的点击逻辑
    $('#clone').click(function(e) {
        e.preventDefault();
        // 克隆时去掉true参数！只复制DOM结构，不带原表单的事件和数据
        const clonedForm = $('#myform_1').clone(false)
            .prop('id', 'myform_2') // 如果要多次克隆，建议用计数器生成唯一ID
            .appendTo('.clone');
        
        // 重要：给克隆后的表单单独初始化Validate
        clonedForm.validate({
            rules: {
                // 这里写你的验证规则，和原表单一致就行
                // 比如：username: { required: true },
                // password: { required: true, minlength: 6 }
            },
            messages: {
                // 对应提示信息，按需添加
            }
        });
    });

    // 初始化原表单的Validate
    $('#myform_1').validate({
        rules: {
            // 原表单的验证规则
        },
        messages: {
            // 原表单的提示信息
        }
    });
});

关键修改点详解 #

• 去掉clone(true)的true参数：clone(false)只会复制表单的HTML结构，不会把原表单的事件绑定、Validate实例关联带过来，从根源避免串逻辑。
• 克隆后重新初始化Validate：每个表单都得有自己的Validate实例，所以克隆完成后必须单独调用validate()，这样提交时才会触发自身的验证。
• 监听表单的submit事件而非按钮click：这样更贴合表单提交的原生逻辑，也避免了手动调用submit()导致的循环触发问题。
• 用$(this).valid()做验证检查：确保只有验证通过的表单才会执行后续提交动作，符合Validate的使用逻辑。

额外小提示 #

如果需要多次克隆表单（比如生成myform_3、myform_4），可以加个计数器来生成唯一ID，避免重复：

let formCounter = 2;
$('#clone').click(function(e) {
    e.preventDefault();
    const clonedForm = $('#myform_1').clone(false)
        .prop('id', `myform_${formCounter}`)
        .appendTo('.clone');
    // 初始化Validate...
    formCounter++;
});

另外，表单里的输入框name属性如果需要独立提交的话，也建议做动态调整，避免后端接收数据时混淆。

内容的提问来源于stack exchange，提问作者Roman Romanishyn