本文详解 jquery 事件委托中因重复绑定导致的 ajax 多次调用问题，提供 `off()` 解绑方案、防重复提交实践及完整修复代码，确保按钮点击仅触发一次请求。
在使用 jQuery 进行 AJAX 开发时，一个常见却隐蔽的问题是：用户仅点击一次按钮，但后端却收到多次请求。这种现象并非后端逻辑错误，而往往源于前端事件监听器的重复注册——尤其在动态渲染组件（如 Laravel Blade 中嵌套的自定义组件）或多次加载同一段 JS 脚本的场景下极易发生。
在你提供的代码中，关键问题出在这一行：
$('body').on('click', '#saveaudios', function (e) { ... });该语句使用事件委托将 #saveaudios 按钮的点击事件绑定到 <body> 上。看似合理，但若包含此脚本的 Blade 模板被多次渲染（例如通过 Livewire 重载、AJAX 局部刷新、或组件重复引入），$(document).ready() 就会被反复执行，从而导致 on('click', ...) 被多次调用——最终 <body> 上累积了多个相同的事件监听器。一旦用户点击 #saveaudios，所有监听器同步触发，AJAX 自然发送多次。
✅ 根本解决方案：注册前先解绑
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
使用 .off() 显式移除已存在的同类型事件监听器，再重新绑定：
$(document).ready(function () {
// ✅ 安全绑定：先解绑，再绑定
$('body').off('click', '#addAudio').on('click', '#addAudio', function (e) {
e.preventDefault();
const $this = $(this);
const textId = $this.data('text-id');
const webinarId = $this.data('webinar-id');
let add_audio_modal = '<form id="addAudioFiles" method="post" action="/panel/text-lesson/saveaudio" enctype="multipart/form-data">';
add_audio_modal += '@csrf';
add_audio_modal += $('#audioFilesModal').html();
add_audio_modal += '</form>'; // ⚠️ 注意：原文缺少闭合标签，已修正
Swal.fire({
html: add_audio_modal,
showCancelButton: false,
showConfirmButton: false,
customClass: { content: 'p-0 text-left' },
width: '48rem',
});
});
// ✅ 关键修复：防止重复绑定
$('body').off('click', '#saveaudios').on('click', '#saveaudios', function (e) {
e.preventDefault();
const $this = $(this);
const form = $('#addAudioFiles');
// ✅ 防重复提交：禁用按钮 + 添加 loading 状态
$this.addClass('loadingbar gray').prop('disabled', true);
const formData = new FormData(form[0]);
formData.append('webinar_id', $this.data('webinar-id'));
formData.append('text_id', $this.data('text-id'));
$.ajax({
url: form.attr('action'),
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function (result) {
if (result && result.code === 200) {
Swal.fire('上传成功！', '', 'success').then(() => {
location.reload(); // 或按需更新音频列表
});
}
},
error: function (xhr) {
$this.removeClass('loadingbar gray').prop('disabled', false);
const errors = xhr.responseJSON?.errors || { general: '保存失败，请重试' };
Swal.fire('操作失败', Object.values(errors).join('<br>'), 'error');
}
});
});
});? 额外建议与最佳实践：
- 避免全局选择器污染：若 #saveaudios 仅存在于模态框内，可改用更精确的委托目标（如 $('#audioListings').on(...)），减少事件冒泡开销。
- 统一数据获取方式：使用 $(element).data('key') 替代 getAttribute()，兼容 HTML5 data-* 属性解析与驼峰转换（如 data-text-id → .data('textId')）。
- 服务端兜底防护：即使前端修复，也应在后端对关键操作（如文件上传）添加幂等性校验（如 token 校验、时间窗口限制），实现双重保障。
- 现代替代方案：长期项目建议逐步迁移至原生 addEventListener + AbortController，或使用 Axios + React/Vue 组件化管理事件生命周期，从根本上规避 jQuery 事件堆积风险。
通过 off().on() 的显式控制，配合按钮禁用与结构化错误处理，即可彻底杜绝“单击多发”问题，提升用户体验与系统稳定性。
