本文详解因 jquery 事件监听器被重复注册而引发的“单次点击却发送多次 ajax 请求”问题，提供 `off()` 预清除、委托绑定优化及防重提交等专业级解决方案。
在 Laravel + jQuery 的典型开发场景中，你可能遇到这样的现象：用户仅点击一次「保存音频」按钮（#saveaudios），后端却收到 2 次、3 次甚至更多重复请求。这不仅造成资源浪费、数据异常（如重复插入），还严重影响用户体验与系统稳定性。根本原因并非 AJAX 本身逻辑错误，而是 事件监听器被重复绑定 —— 即 $('body').on('click', '#saveaudios', ...) 被执行了多次。
? 为什么事件会重复绑定？
常见诱因包括：
- Blade 模板中通过 @include 或组件动态渲染时，脚本块被多次插入（尤其在局部刷新、Tab 切换或模态框反复打开场景）；
- 页面未做 JS 模块隔离，同一段初始化代码在路由跳转/组件复用时被重复执行；
- 使用 $(document).ready() 包裹但未校验事件是否已存在，导致每次 DOM 就绪都新增监听器。
你提供的代码中，$('body').on('click', '#saveaudios', ...) 位于全局 $(document).ready() 内，若该脚本随 Blade 组件（如
✅ 正确做法：绑定前先解绑（推荐）
使用 .off() 主动移除已有同类型监听器，再重新绑定，确保唯一性：
$(document).ready(function () {
// ✅ 安全绑定：先 off，再 on
$('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', $webinarid);
formData.append('text_id', $textid);
$.ajax({
url: form.attr('action'),
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function (result) {
if (result?.code === 200) {
Swal.fire('上传成功！', '', 'success').then(() => {
location.reload(); // 或局部刷新音频列表
});
}
},
error: function (xhr) {
$this.removeClass('loadingbar gray').prop('disabled', false);
const msg = xhr.responseJSON?.message || '保存失败，请重试';
Swal.fire('错误', msg, 'error');
}
});
});
});⚠️ 注意：$webinarid 和 $textid 在当前作用域中为全局变量（来自上文 $('#addAudio').data() 或 PHP 注入），但需确保其在 #saveaudios 触发时仍有效。更健壮的做法是从按钮自身读取数据属性：const $this = $(this); const textId = $this.data('text-id') || $this.closest('form').data('text-id'); const webinarId = $this.data('webinar-id') || $this.closest('form').data('webinar-id');
?️ 进阶防护：双重保险策略
| 措施 | 说明 | 示例 |
|---|---|---|
| 按钮状态锁定 | 提交中禁用按钮，防止视觉/操作层面的重复点击 | $(this).prop('disabled', true) |
| 请求锁标识 | 使用布尔标志位避免并发触发 | let isSubmitting = false; if (isSubmitting) return; isSubmitting = true; ... finally { isSubmitting = false; } |
| 事件委托优化 | 避免在 body 上高频监听，改用更精确的父容器（如 #btnDiv） | $('#btnDiv').off('click', '#saveaudios').on('click', '#saveaudios', ...) |
? 总结
- ❌ 错误认知：“AJAX 调用写错了” → 实际多为 事件管理失控；
- ✅ 黄金法则：所有动态委托事件（尤其是 on()）必须搭配 off() 预清理；
- ? 最佳实践：结合 data-* 属性传递上下文、按钮禁用 + 加载态反馈、服务端幂等设计（如 token 校验），构建端到端防重体系。
遵循以上方案，即可彻底根治“单击变多发”的顽疾，让前端交互既健壮又可预期。
