本文解析 jQuery 中因事件重复绑定导致 AJAX success 回调意外执行两次的问题，指出原代码在点击 .delc 时为 #del-btn-customer 动态重复绑定 click 事件的致命缺陷，并提供解耦、单次绑定的标准修复方案。
本文解析 jquery 中因事件重复绑定导致 ajax `success` 回调意外执行两次的问题，指出原代码在点击 `.delc` 时为 `#del-btn-customer` 动态重复绑定 click 事件的致命缺陷，并提供解耦、单次绑定的标准修复方案。
问题本质并非 AJAX 本身异常，而是 事件监听器的错误生命周期管理。原始代码中，$('#del-btn-customer').on('click', ...) 被写在 .delc 的点击事件处理函数内部——这意味着每次用户点击任意一个删除按钮（.delc），都会为 #del-btn-customer 新增一个独立的 click 监听器。当模态框多次打开又关闭后，该按钮可能已累积绑定 3 个、5 个甚至更多相同的 AJAX 请求逻辑。一旦最终点击确认按钮，所有历史绑定的回调将依次并发执行，造成“删除成功多次”“行被删掉多遍”等表象。
正确的做法是分离事件职责、避免嵌套绑定：
-
.delc点击仅负责收集当前待删数据（id、item）、显示模态框； -
#del-btn-customer的 click 事件应全局且仅绑定一次，其回调中直接使用外部作用域缓存的id和item变量发起请求。
修复后的代码结构清晰、可维护性强：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
$(document).ready(function(){
// 声明共享变量，用于跨事件传递上下文
let id, item, data;
// 绑定删除触发按钮：仅收集信息 + 显示模态框
$(document).on('click', '.delc', function(e) {
e.preventDefault();
console.log("delete trigger clicked");
id = $(this).closest('.delc').attr('rel');
item = $(this).parent().parent(); // 精确指向目标行（tr 或 li）
data = 'id=' + id;
$('#mdl-avviso-customer').modal('show');
});
// 绑定确认删除按钮：全局单次绑定，复用已存上下文
$('#del-btn-customer').on('click', function(e){
e.preventDefault();
$.ajax({
url: 'php/del_customer.php',
type: 'POST',
data: data,
cache: false,
dataType: 'json', // 推荐显式指定，便于服务端返回结构化响应
success: function(response) {
// 建议增加服务端返回校验，如 if (response.status === 'success')
$(item).fadeOut(300, function() {
$(this).remove();
});
},
error: function(xhr, status, err) {
console.error('Delete failed:', status, err);
alert('删除失败，请重试。');
}
});
});
});⚠️ 关键注意事项：
- ✅ 使用
let替代var声明id/item/data，避免变量提升与作用域污染； - ✅ 确保
#del-btn-customer是静态 DOM 元素（非动态生成），否则需改用委托绑定（如$(document).on('click', '#del-btn-customer', ...)）； - ✅
dataType: 'json'与服务端header('Content-Type: application/json')配合，提升健壮性； - ❌ 切勿在事件处理器内重复调用
.on()绑定同一元素，这是前端事件泄漏的经典诱因。
通过解耦交互流程与请求逻辑，既彻底规避了重复触发，也为后续扩展（如添加加载状态、防重复提交、撤销功能）打下坚实基础。
