当页面中存在多个表单时，若错误使用 jQuery .on() 的委托语法（传入 jQuery 对象而非选择器字符串），会导致一次提交触发多次 AJAX 请求。本文详解两种正确绑定方式：直接绑定与事件委托，并提供可立即使用的修复代码。

当页面中存在多个表单时，若错误使用 jquery `.on()` 的委托语法（传入 jquery 对象而非选择器字符串），会导致一次提交触发多次 ajax 请求。本文详解两种正确绑定方式：直接绑定与事件委托，并提供可立即使用的修复代码。

在前端开发中，为多个动态或静态表单统一绑定 submit 事件是常见需求。但如示例所示，若将已获取的 jQuery 对象（如 $('.js-address-form form')）直接作为 .on() 的第二个参数传递，jQuery 会忽略该参数（因其仅接受字符串选择器），转而将事件绑定到 document 上并对每个循环项重复注册监听器——最终导致一个表单提交触发 N 次处理逻辑。

✅ 正确方案一：直接绑定（推荐用于静态/已渲染表单）

若所有表单在 DOM 加载完成时已存在（非动态插入），应直接为每个表单元素绑定事件，避免事件委托带来的冗余注册：

// 假设 parentForm 是一个包含多个 jQuery 表单对象的数组
jQuery.each(parentForm, function(i, $form) {
    $form.on('submit', function(event) {
        event.preventDefault(); // 阻止默认提交行为

        const method = $form.attr('method') || 'POST';
        const consent = consent_section[i] || '';

        $.ajax({
            type: method,
            url: lpd_front_controller,
            data: {
                ajax: true,
                action: 'Add',
                id_customer: lpd_id_customer,
                customer_token: lpd_customer_token,
                id_guest: lpd_id_guest,
                guest_token: lpd_guest_token,
                consent_section: consent
            },
            success: function(response) {
                console.log('提交成功:', response);
            },
            error: function(xhr, status, err) {
                console.error('提交失败:', err);
            }
        });
    });
});

✅ 优势：语义清晰、无重复绑定、性能更优；
⚠️ 注意：此方式不适用于后续通过 JS 动态添加的表单（需手动为新表单调用 .on('submit', ...)）。

✅ 正确方案二：单一事件委托（推荐用于动态表单）

若表单可能动态插入（如通过 AJAX 加载），应使用一次委托绑定，利用事件冒泡机制统一捕获：

// 仅需一行绑定，无需循环
$(document).on('submit', '.js-address-form form', function(event) {
    event.preventDefault();

    const $form = $(this); // 当前被提交的表单
    const index = $('.js-address-form form').index($form); // 获取当前表单在集合中的索引
    const method = $form.attr('method') || 'POST';
    const consent = consent_section[index] || '';

    $.ajax({
        type: method,
        url: lpd_front_controller,
        data: {
            ajax: true,
            action: 'Add',
            id_customer: lpd_id_customer,
            customer_token: lpd_customer_token,
            id_guest: lpd_id_guest,
            guest_token: lpd_guest_token,
            consent_section: consent
        },
        success: function(response) {
            console.log(`表单 #${index} 提交成功`);
        },
        error: function(xhr, status, err) {
            console.error(`表单 #${index} 提交失败:`, err);
        }
    });
});

✅ 优势：自动兼容未来新增表单，代码简洁无冗余；
? 技巧：使用 $(this) 精准定位当前触发事件的表单，并通过 .index() 安全匹配 consent_section 数组项。

⚠️ 关键注意事项

• 禁止将 jQuery 对象传给 .on() 的 selector 参数：$(document).on('submit', $form, handler) 是无效写法，jQuery 会静默忽略 $form，实际等效于 $(document).on('submit', handler)，造成全局 submit 事件被反复注册。
• 始终调用 event.preventDefault()：防止表单原生提交导致页面跳转或重复请求。
• 避免 async: false：已废弃且阻塞主线程，应改用 Promise 或回调处理异步逻辑。
• 验证数据来源：若 consent_section[i] 依赖循环索引，请确保 parentForm 与 consent_section 长度一致，否则建议改用 data-* 属性在 HTML 中显式关联（如
  ），提升健壮性。

通过以上任一方式重构，即可确保每个表单提交仅触发一次 AJAX 请求，彻底解决多表单场景下的事件重复执行问题。