如何防止 jQuery 中重复绑定导致的 AJAX 多次触发问题

本文详解因事件重复绑定引发的 ajax 多次提交问题，通过 off() 清理已有监听器、合理使用事件委托及避免脚本重复加载，确保每次点击仅执行一次请求。

在 laravel + jquery 的前端开发中，一个常见却隐蔽的问题是：按钮点击一次，ajax 却被触发多次。这并非后端逻辑错误，而往往源于前端事件监听器的重复注册——尤其当使用 $(document).on() 或 $(‘body’).on() 这类事件委托时，若脚本被多次执行（如 Blade 组件重复渲染、动态插入 HTML 后重载 js），on() 会不断叠加新的监听器，导致单次点击触发 N 次回调。

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

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

该绑定未做去重处理。当组件（如 ）被多次渲染，或页面局部刷新后脚本再次执行，#saveaudios 的 click 事件监听器就会被反复追加，最终形成“一触多发”。

✅ 正确解法：绑定前先解绑

使用 .off() 显式移除已存在的同类型事件监听器，再重新绑定：

// ✅ 推荐：安全绑定，避免重复 $('body').off('click', '#saveaudios').on('click', '#saveaudios', function(e) {     e.preventDefault();     const $this = $(this);     const form = $('#addAudioFiles');      const formData = new FormData(form[0]);     formData.append('webinar_id', $webinarid);     formData.append('text_id', $textid);     const action = form.attr('action');      $this.addClass('loadingbar gray').prop('disabled', true);     form.find('input, textarea').removeClass('is-invalid');      $.ajax({         url: action,         type: 'POST',         data: formData,         processData: false,         contentType: false,         success: function(result) {             if (result && result.code === 200) {                 Swal.close(); // 关闭弹窗                 // 刷新音频列表或提示成功                 loadAudioListings(); // 示例：自定义刷新函数             }         },         error: function(xhr) {             const errors = xhr.responseJSON?.errors || {};             Object.keys(errors).forEach(key => {                 form.find(`[name="${key}"]`).addClass('is-invalid');             });             $this.removeClass('loadingbar gray').prop('disabled', false);         }     }); });

⚠️ 其他关键注意事项

• 避免脚本重复执行：检查 Blade 模板是否在循环或条件块中多次引入同一段 <script>；推荐将通用 JS 抽离为独立文件，在布局中统一引入一次。</script>
• 不要在模态框生成逻辑内重复绑定：你当前在 #addAudio 点击后动态拼接 HTML 并调用 Swal.fire()，但 #saveaudios 的事件绑定写在 $(document).ready() 中——这意味着只要该脚本执行一次，监听器就存在。若该脚本随组件重复渲染，问题重现。✅ 最佳实践是：事件绑定只做一次，且置于全局作用域（如主 layout 的 script 块），而非组件内部。
• 使用唯一标识符校验（进阶防护）：可在按钮上添加临时标记，阻止重复点击（防用户手抖）：

  if ($this.data('processing')) return; $this.data('processing', true).addClass('loadingbar gray'); // … AJAX 完成后 .always(() => $this.removeData('processing').removeClass('loadingbar gray'));

✅ 总结

遵循以上实践，即可彻底杜绝“点击一次、请求多次”的顽疾，提升交互可靠性与用户体验。