如何为不同元素的click和blur事件绑定同一函数并避免重复请求？

当然可以合并这两个事件处理逻辑！而且我们还能顺便解决重复发送AJAX请求的问题，让代码更简洁、易维护。下面是具体的实现步骤和优化后的代码：

第一步：提取重复逻辑为独立函数 #

先把两段代码里重复的AJAX请求和结果处理逻辑抽出来，做成一个单独的函数，这样不管是点击按钮还是输入框失焦，都能直接调用它，避免写两遍一模一样的代码：

// 标记是否正在发送AJAX请求，防止重复提交
let isRequesting = false;

function submitAccountForm() {
  // 如果正在请求，直接返回，避免重复发送
  if (isRequesting) return;
  
  isRequesting = true;
  
  // 注意：原代码里的$("account-form")少了#，这里修正为$("#account-form")
  const accountform = $("#account-form").serialize();
  
  $.ajax({
    type: 'post',
    url: "includes/updateaccount.php",
    data: { accountform: accountform },
    success: function(data) {
      const obj = JSON.parse(data);
      for (let i = 0; i < obj.length; i++) {
        const { status, field, message } = obj[i];
        const $input = $(`input[name="${field}"]`);
        const $errorDiv = $input.next('div');
        
        if (status === 'error') {
          $input.addClass('invalid-input');
          $errorDiv.remove();
          $input.after(`<div class="inputerror">${message}</div>`);
        } else if (status === 'success') {
          $errorDiv.remove();
          $input.removeClass('invalid-input');
        }
      }
    },
    // 请求完成（不管成功失败）都重置请求标记
    complete: function() {
      isRequesting = false;
    }
  });
}

第二步：统一绑定事件并添加触发条件 #

接下来，我们在父元素#account-details上统一绑定事件，然后通过判断事件类型和触发元素来精准控制什么时候执行提交函数：

$("#account-details").on("click blur", ".save-button, input", function(e) {
  e.preventDefault();
  
  const $target = $(e.target);
  // 触发条件：点击.save-button 或者 input触发blur事件
  const shouldSubmit = ($target.is('.save-button') && e.type === 'click') 
                    || ($target.is('input') && e.type === 'blur');
  
  if (shouldSubmit) {
    submitAccountForm();
  }
});

关键细节说明 #

• 防止重复请求：用isRequesting变量做请求锁，当请求还在进行时，再次触发的话会直接返回，避免后端收到重复请求。
• 修正原代码错误：原代码里的$("account-form")缺少ID选择符#，会导致无法正确序列化表单数据，已经在优化后的代码里修正。
• 触发逻辑精准控制：只有点击按钮（click事件+.save-button元素）或者输入框失焦（blur事件+input元素）时才会执行提交，完全符合你“点击输入框不触发”的要求。

这样改造后，代码冗余度大大降低，逻辑更清晰，还解决了重复请求的问题，一举多得！

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