本文解析 jQuery 3.5.1 中 $.ajax() 的 success 回调意外执行两次的根本原因——事件监听器重复绑定，并提供结构清晰、可复用的修复方案，避免误删多行等副作用。
本文解析 jquery 3.5.1 中 `$.ajax()` 的 `success` 回调意外执行两次的根本原因——事件监听器重复绑定，并提供结构清晰、可复用的修复方案，避免误删多行等副作用。
在使用 jQuery 处理模态框确认删除逻辑时，一个常见却隐蔽的陷阱是：success 回调被触发多次，导致 DOM 元素被重复移除、后端接口被重复调用，甚至引发数据不一致（如本例中“一次点击删除多行”）。问题代码的核心缺陷在于事件监听器的错误嵌套绑定方式：
$(document).on('click', '.delc', function(e) {
// ……
$('#del-btn-customer').on('click', function(e){ // ❌ 危险！每次点击 .delc 都新增一个监听器
$.ajax({ /* ... */ });
});
});由于 $('#del-btn-customer').on('click', ...) 被写在 .delc 的点击处理函数内部，每次打开模态框（即每次点击 .delc）都会为 #del-btn-customer 新增一个独立的 click 监听器。若用户快速点击多个删除项再确认，监听器会层层累积——第 3 次点击确认按钮时，将同时触发 3 个 AJAX 请求，success 自然执行 3 次。
✅ 正确做法是解耦事件绑定逻辑：将模态框触发与确认操作分离，确保 #del-btn-customer 的监听器仅绑定一次，且通过闭包或作用域外变量安全传递上下文数据：
$(document).ready(function() {
let currentItemId = null;
let currentItemEl = null;
// 1. 绑定删除触发事件（只绑定一次）
$(document).on('click', '.delc', function(e) {
e.preventDefault();
console.log("delete clicked");
currentItemId = $(this).closest('.delc').attr('rel');
currentItemEl = $(this).parent().parent();
$('#mdl-avviso-customer').modal('show');
});
// 2. 绑定确认按钮事件（只绑定一次，全局唯一）
$('#del-btn-customer').on('click', function(e) {
e.preventDefault();
if (!currentItemId || !currentItemEl) return; // 安全防护
$.ajax({
url: 'php/del_customer.php',
type: 'POST',
data: { id: currentItemId }, // ✅ 推荐使用对象格式，更健壮
cache: false,
dataType: 'json', // 显式声明响应类型，提升可维护性
success: function(response) {
currentItemEl.fadeOut(300, function() {
$(this).remove();
});
// 重置状态，防止残留引用
currentItemId = null;
currentItemEl = null;
},
error: function(xhr, status, err) {
console.error('Delete failed:', err);
alert('删除失败，请重试');
}
});
});
});? 关键改进点总结：
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
-
避免嵌套
on()：所有事件监听器均在$(document).ready()内扁平化绑定，杜绝重复注册； -
使用
let声明临时状态变量：确保每次操作上下文隔离，且支持及时重置； -
推荐
data: { id: ... }对象传参：比拼接字符串更安全，自动处理编码与类型； - 添加空值校验与错误处理：增强鲁棒性，避免静默失败；
-
显式设置
dataType：明确预期响应格式，便于调试与类型校验。
⚠️ 注意：若 #del-btn-customer 是动态生成的（如通过 JS 插入模态框），应改用事件委托绑定：
$(document).on('click', '#del-btn-customer', function(e) { /* ... */ });以确保对动态元素生效。
遵循以上模式，即可彻底根除 success 多次触发问题，构建稳定、可预测的前端交互逻辑。
