本文详解 jQuery Ajax 调用两次的根本原因及正确修复方法：避免内联 onclick 与 jQuery 事件绑定共存导致的重复触发，推荐统一使用 $(document).ready() + .click() 绑定，并移除 HTML 中冗余的 onclick 属性。
本文详解 jquery ajax 调用两次的根本原因及正确修复方法：避免内联 `onclick` 与 jquery 事件绑定共存导致的重复触发，推荐统一使用 `$(document).ready()` + `.click()` 绑定，并移除 html 中冗余的 `onclick` 属性。
在实际开发中，jQuery Ajax 请求意外触发两次是一个常见但易被忽视的问题。其根本原因往往并非 Ajax 本身逻辑错误，而是事件绑定方式冲突所致——当同时存在 HTML 内联 onclick 属性和 jQuery 动态绑定（如 $('#btnSave2').click(...)）时，一次点击会同时触发两个独立的事件处理器，从而导致 $.ajax() 执行两次。
以下为典型错误写法（问题源头）：
<input type="button" id="btnSave2" value="Save" onclick="Event(1)" class="btn btn-primary col-lg-12">
// ❌ 错误：未加 document ready 包裹，且与 onclick 共存
function Event(loop) {
debugger;
$.ajax({
method: "POST",
url: "UpEven.aspx",
data: { slno: EventNo[0] }
}).done(function(msg) {
debugger;
});
}
该写法存在两大隐患：
-
onclick="Event(1)"在页面加载时即注册一次调用； - 若后续又执行
$('#btnSave2').click(Event)（或类似绑定），则再次注册一个监听器； - 最终点击按钮 → 触发两次
Event(1)→ 发起两次 Ajax 请求。
✅ 正确做法是 统一事件管理入口，彻底移除内联行为：
第一步：清理 HTML，删除 onclick 属性
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
<input type="button" id="btnSave2" value="Save" class="btn btn-primary col-lg-12">
第二步：在 DOM 就绪后绑定事件（推荐标准写法）
$(document).ready(function() {
$('#btnSave2').click(function() {
Event(1);
});
});
function Event(loop) {
debugger;
$.ajax({
method: "POST",
url: "UpEven.aspx",
data: { slno: EventNo[0] }
})
.done(function(msg) {
debugger;
// ✅ 建议在此处添加成功反馈，如提示框或 UI 状态更新
alert("保存成功！");
})
.fail(function(xhr, status, error) {
console.error("Ajax 请求失败：", error);
alert("保存失败，请重试。");
});
}
? 关键注意事项：
- ✅ 必须将 jQuery 事件绑定包裹在
$(document).ready()或简写$(function(){...})中，确保 DOM 元素已加载完成； - ✅ 函数名大小写需一致（原文中
event()与Event()混用易引发ReferenceError，应统一为Event）； - ✅ 避免在全局作用域直接调用
Event(1)，防止页面加载时误执行； - ✅ 推荐为 Ajax 添加
.fail()回调，提升错误可追踪性； - ⚠️ 若项目已使用其他框架（如 Vue/React），应优先采用其响应式事件机制，而非混合 jQuery 绑定。
通过以上重构，可确保每次点击仅触发一次 Event(1)，进而保障 Ajax 请求的幂等性与用户体验一致性。
