如何解决 jQuery 中 AJAX 请求被重复触发的问题

本文详解 jquery 事件委托中因重复绑定导致的 ajax 多次调用问题，提供 `off()` 解绑方案、防重复提交实践及完整修复代码，确保按钮点击仅触发一次请求。

在使用 jquery 进行 ajax 开发时，一个常见却隐蔽的问题是：用户仅点击一次按钮，但后端却收到多次请求。这种现象并非后端逻辑错误，而往往源于前端事件监听器的重复注册——尤其在动态渲染组件（如 laravel Blade 中嵌套的自定义组件）或多次加载同一段 js 脚本的场景下极易发生。

在你提供的代码中，关键问题出在这一行：

$('body').on('click', '#saveaudios', function (e) { ... });

该语句使用事件委托将 #saveaudios 按钮的点击事件绑定到

上。看似合理，但若包含此脚本的 Blade 模板被多次渲染（例如通过 Livewire 重载、AJAX 局部刷新、或组件重复引入），$(document).ready() 就会被反复执行，从而导致 on(‘click’, …) 被多次调用——最终 上累积了多个相同的事件监听器。一旦用户点击 #saveaudios，所有监听器同步触发，AJAX 自然发送多次。

✅ 根本解决方案：注册前先解绑

使用 .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() 的显式控制，配合按钮禁用与结构化错误处理，即可彻底杜绝“单击多发”问题，提升用户体验与系统稳定性。