jQuery表单提交防重复提交方法

本文深入剖析了 jQuery 表单提交中一个极易被忽视却后果严重的陷阱：在 submit 事件处理器内调用 `$(form).submit()` 会引发无限递归，导致页面卡死或崩溃；核心解决方案是缓存原生表单 DOM 元素（如 `const form = this`），并在异步操作（如 Braintree tokenization）完成后直接调用 `form.submit()`——这一原生方法不触发任何事件，彻底绕过 jQuery 事件系统，确保流程安全收尾。文中还揭示了 ID 命名冲突等隐蔽坑点，并强调“jQuery 提交 = 触发事件，原生提交 = 执行动作”这一关键认知，为处理支付集成、防重复提交等真实场景提供了简洁可靠的技术范式。

在 jQuery 的 submit 事件处理器中调用 $(form).submit() 会再次触发绑定的事件监听器，导致无限递归；正确做法是缓存表单 DOM 元素并调用其原生 submit() 方法，绕过 jQuery 事件系统。

在 jQuery 的 `submit` 事件处理器中调用 `$(form).submit()` 会再次触发绑定的事件监听器，导致无限递归；正确做法是缓存表单 DOM 元素并调用其原生 `submit()` 方法，绕过 jQuery 事件系统。

在使用 Braintree Hosted Fields 等第三方支付 SDK 时，一个常见需求是：拦截表单提交 → 异步调用 tokenize() 获取支付凭证 → 注入 nonce 到隐藏字段 → 最终提交表单。但若在 .on('submit') 回调中直接使用 $("#testform").submit()，jQuery 会重新触发已绑定的 submit 事件处理器，形成死循环，最终导致浏览器卡死或报错。

根本原因在于：

• $(selector).submit() 是 jQuery 封装方法，等价于 $(selector).trigger('submit')，会再次进入事件处理函数；
• 而原生 DOM 元素的 .submit() 方法（如 formElement.submit()）不触发任何事件，仅执行表单提交行为，完全绕过事件监听机制。

✅ 正确实现如下：

$("#testform").on('submit', function(e) {
    e.preventDefault(); // 阻止默认提交
    const form = this; // 保存原生 form 元素引用（this 指向当前表单 DOM 节点）

    hostedFields.tokenize(function(err, payload) {
        if (err) {
            console.error("Tokenization failed:", err);
            // 可在此处显示错误提示，不提交表单
            return;
        }

        // 成功获取 nonce，注入到隐藏字段
        $("#nonce").val(payload.nonce);

        // ✅ 关键：调用原生 submit()，不触发 jQuery 事件
        form.submit();
    });
});

⚠️ 注意事项：

• 切勿使用 $("#testform").submit() 或 $("#testform").trigger('submit') —— 二者均会重启事件流；
• this 在事件处理器中始终指向当前触发事件的 DOM 元素（即
  ），可安全用于后续原生操作；
• 若需兼容更复杂场景（如多次 tokenization、防重复提交），建议在 e.preventDefault() 后立即禁用提交按钮，并在 form.submit() 前恢复或跳过；
• Braintree 官方示例中若出现 id="submit" 的按钮，务必避免——该 ID 会覆盖表单原生 form.submit 方法（因命名冲突），导致 form.submit() 失效甚至报错。

总结：事件处理中的“自我提交”陷阱，本质是混淆了 jQuery 事件触发与原生表单提交语义。牢记「jQuery 提交 = 触发事件，原生提交 = 执行动作」，即可彻底规避循环，确保异步流程可靠收尾。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~