jQuery Ajax重复调用问题：点击Save按钮后Ajax触发两次需解决

问题代码 #

按钮HTML：

<input type="button" id="btnSave2" value="Save" onclick="Event(1)" class="btn btn-primary col-lg-12" />

JavaScript函数：

function event(loop){
  debugger
  $.ajax({
    method: "POST",
    url: "UpEven.aspx",
    data: { slno: EventNo[0]}
  }).done(function(msg){
    debugger
  })
}

症状：点击Save按钮后，初始debugger仅触发1次，但AJAX请求执行了两次，需要实现每次点击仅发送一次AJAX请求。

可能的原因及解决办法 #

• 函数名大小写不一致：按钮onclick调用的是Event(1)（大写E），但定义的函数是event(loop)（小写e）。如果全局环境中存在另一个Event函数（比如原生构造函数或自定义重复函数），可能导致两次调用。
  解决：统一函数名大小写，比如将按钮的onclick改为event(1)，或者将函数名改为Event，确保调用和定义完全匹配。

• 重复绑定点击事件：页面可能重复引入了该JS文件，或者通过其他方式（如jQuery的on()方法）再次给#btnSave2绑定了点击事件，导致事件触发两次。
  解决：检查页面是否重复加载了目标JS文件，排查是否有其他代码给该按钮绑定了点击事件，移除多余的绑定逻辑。

• 添加请求锁防止重复发送：即使事件只触发一次，也可能因为网络延迟等原因用户多次点击导致重复请求，或者存在隐式的重复触发逻辑。可以通过变量标记请求状态，阻止未完成时的新请求：
  修改后的JS代码：

  let isAjaxPending = false;
  function event(loop){
    if(isAjaxPending) return;
    isAjaxPending = true;
    
    debugger
    $.ajax({
      method: "POST",
      url: "UpEven.aspx",
      data: { slno: EventNo[0]}
    }).done(function(msg){
      debugger
    }).always(function(){
      // 请求完成（成功/失败）后解锁
      isAjaxPending = false;
    })
  }
  

• 阻止事件冒泡或默认行为：虽然type="button"的按钮不会触发表单提交，但如果按钮嵌套在表单内或存在事件冒泡传递，可能导致意外的重复触发。可以在调用时阻止事件传播：
  按钮修改为：

  <input type="button" id="btnSave2" value="Save" onclick="event(1); return false;" class="btn btn-primary col-lg-12" />
  

  或者在函数内处理：

  function event(loop, e){
    // 兼容不同浏览器的事件对象
    e = e || window.event;
    e.preventDefault();
    e.stopPropagation();
    
    debugger
    $.ajax({
      method: "POST",
      url: "UpEven.aspx",
      data: { slno: EventNo[0]}
    }).done(function(msg){
      debugger
    })
  }
  

  按钮对应改为：

  <input type="button" id="btnSave2" value="Save" onclick="event(1, event)" class="btn btn-primary col-lg-12" />
  

内容的提问来源于stack exchange，提问作者Kate