本文解析因在bootstrap模态框show.bs.modal事件内重复绑定提交按钮点击事件，导致每次打开模态框都新增一个监听器，从而引发ajax成功回调被多次执行、提示消息重复弹出的问题，并提供正确解耦事件绑定的实践方案。
本文解析因在bootstrap模态框show.bs.modal事件内重复绑定提交按钮点击事件，导致每次打开模态框都新增一个监听器，从而引发ajax成功回调被多次执行、提示消息重复弹出的问题，并提供正确解耦事件绑定的实践方案。
该问题本质是事件监听器的意外累积（Event Listener Leakage），而非AJAX逻辑本身有误。观察原始代码：
$('#my_modal').on('show.bs.modal', function(e) {
// ... 表单初始化逻辑
$("button#submit").click(function() { // ⚠️ 错误：每次模态框显示都注册一次 click 监听器
$.ajax({ /* ... */ });
});
});每当用户点击触发模态框（如 data-bs-toggle="modal"），show.bs.modal 事件被触发，内部的 $("button#submit").click(...) 就会重新绑定一个新的点击处理函数。第一次打开 → 绑定1个；第二次打开（未刷新）→ 绑定第2个；第n次 → 共n个独立监听器。当用户最终点击提交按钮时，所有已绑定的监听器同步触发，于是 alert("success") 被执行 n 次，表单重置与模态框关闭也重复发生，造成严重副作用。
✅ 正确做法：分离关注点，静态绑定或委托绑定
应将事件绑定逻辑移出模态框生命周期钩子，确保只绑定一次。推荐两种稳健方案：
方案一：使用事件委托（推荐，兼容动态元素）
$(document).on('click', 'button#submit', function(e) {
e.preventDefault(); // 阻止默认表单提交（如有）
$.ajax({
type: "POST",
url: "../receipt/send.php", // ⚠️ 建议移除 async: false（已废弃且阻塞UI）
data: $('form.send_p_index').serialize(),
success: function(data) {
alert("success");
$("#send_p_index")[0].reset();
$("#my_modal").modal('hide');
},
error: function() {
alert("Error");
}
});
});✅ 优势：即使模态框内容动态加载或DOM重绘，委托监听依然有效；仅绑定一次，彻底避免重复。
方案二：文档就绪时直接绑定（适用于静态DOM）
$(document).ready(function() {
$('#submit').on('click', function(e) {
e.preventDefault();
// ... 同上 AJAX 逻辑
});
});⚠️ 关键注意事项
- 禁用 async: false：jQuery 已弃用同步 AJAX（async: false），它会冻结浏览器主线程，导致UI无响应，严重影响用户体验。现代开发必须使用异步（默认即为 true），并通过 success/error 或 Promise（.then()/.catch()）处理结果。
- 防止默认提交行为：务必调用 e.preventDefault()，避免表单原生提交打断AJAX流程。
- 模态框初始化逻辑保留在 show.bs.modal 中：如设置 p_index 等动态参数，这部分可保留——只需把事件绑定抽离出去。
- ID选择器唯一性：确保 #submit 和 #send_p_index 在页面中唯一，否则可能导致操作目标错误。
总结
重复提示的根本原因是“在反复触发的事件中执行了重复的事件绑定”。解决核心在于恪守单一职责原则：模态框显示事件负责数据初始化，而表单提交事件应由独立、一次性绑定的监听器统一处理。采用事件委托（$(document).on('click', selector, handler)）是最健壮、可维护的实践，既杜绝监听器泄漏，又具备良好的动态DOM兼容性。
