本文详解因事件重复绑定引发的 ajax 多次提交问题，通过 off() 清除已有监听器、合理使用事件委托及脚本加载控制，确保按钮点击仅触发一次请求。
在 Laravel + jQuery 的前端交互中，一个常见却隐蔽的 Bug 是：用户仅点击一次“保存音频”按钮（如 #saveaudios），但后台却收到多条重复请求。这不仅造成服务端资源浪费、数据重复插入，还可能引发 UI 状态错乱（如多次弹窗、重复提示）。根本原因并非逻辑错误，而是 jQuery 事件监听器被重复注册 —— 每次模态框渲染或脚本重载，都会为同一元素新增一个 .on('click', ...) 监听器，最终点击时所有绑定的回调函数全部执行。
? 问题定位：为什么事件会重复绑定？
从提供的 Blade 模板和脚本可见：
- #saveaudios 按钮位于动态注入的 Swal 弹窗 HTML 中（通过 Swal.fire({ html: add_audio_modal }) 插入）；
- 而事件绑定代码 $('body').on('click', '#saveaudios', ...) 写在 $(document).ready() 内，且未做去重处理；
- 若该 JS 片段因组件重渲染、Turbo/Inertia 导航、或 Blade 中多次 @include 被执行多次，on() 就会反复追加监听器，形成“监听器堆积”。
✅ 验证方法：在浏览器控制台执行 $('#saveaudios').data('events')（旧版 jQuery）或使用开发者工具 → Elements → 选中按钮 → Event Listeners 面板，查看 click 事件是否绑定多个 handler。
✅ 正确解法：绑定前先解绑（推荐）
使用 off() 主动移除已存在的同类型委托事件，再重新绑定：
$(document).ready(function () {
// ✅ 安全绑定：先解绑，再绑定
$('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', $this.data('webinar-id'));
formData.append('text_id', $this.data('text-id'));
$this.addClass('loadingbar gray').prop('disabled', true);
form.find('input, textarea').removeClass('is-invalid');
$.ajax({
url: form.attr('action'),
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function (result) {
if (result?.code === 200) {
Swal.close(); // 关闭弹窗
// 刷新音频列表或显示成功提示
loadAudioListings(); // 示例：自定义刷新函数
}
},
error: function (xhr) {
$this.removeClass('loadingbar gray').prop('disabled', false);
// 显示后端验证错误（如 Laravel Validate 返回的 errors）
if (xhr.responseJSON?.errors) {
Object.keys(xhr.responseJSON.errors).forEach(key => {
const $field = form.find(`[name="${key}"]`);
$field.addClass('is-invalid');
$field.next('.invalid-feedback').text(xhr.responseJSON.errors[key][0]);
});
}
}
});
});
});⚠️ 其他关键注意事项
- 避免脚本重复执行：检查 Blade 模板是否在循环、条件块或组件中多次引入该 <script>；建议将通用 JS 抽离为独立文件，在页面级统一加载一次。</script>
- 不要滥用 $(document).on() 绑定到动态内容：若 #saveaudios 按钮每次都是全新 DOM 节点（如 Swal 动态生成），委托到 body 是合理的；但需确保委托逻辑只运行一次。
- 禁用按钮后增加防抖（可选增强）：即使事件未重复绑定，网络延迟下用户快速双击仍可能触发两次。可在 success/error 回调末尾重置按钮状态，并添加 setTimeout 延迟恢复，或使用节流函数。
- Laravel 后端配合幂等性设计：对关键操作（如上传保存）添加唯一请求 ID（X-Request-ID）或数据库唯一约束，作为服务端兜底防护。
✅ 总结
解决 AJAX 多次触发的核心在于 事件生命周期管理：jQuery 的 on() 不会自动覆盖旧监听器，必须显式 off()。将 $('body').off(...).on(...) 作为动态元素事件绑定的标准写法，可彻底规避此类问题。同时，结合脚本加载治理与服务端防御，构建健壮的前后端协作流程。
