当页面中存在多个表单时，若错误使用 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 中显式关联（如<form data-consent-index="0"></form>），提升健壮性。
通过以上任一方式重构，即可确保每个表单提交仅触发一次 AJAX 请求，彻底解决多表单场景下的事件重复执行问题。
