在 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 元素（即 <form>），可安全用于后续原生操作；
- 若需兼容更复杂场景（如多次 tokenization、防重复提交），建议在 e.preventDefault() 后立即禁用提交按钮，并在 form.submit() 前恢复或跳过；
- Braintree 官方示例中若出现 id="submit" 的按钮，务必避免——该 ID 会覆盖表单原生 form.submit 方法（因命名冲突），导致 form.submit() 失效甚至报错。
总结：事件处理中的“自我提交”陷阱，本质是混淆了 jQuery 事件触发与原生表单提交语义。牢记「jQuery 提交 = 触发事件，原生提交 = 执行动作」，即可彻底规避循环，确保异步流程可靠收尾。
