为何AJAX点击事件处理程序会发送两次请求？

问题出在你把按钮的click事件绑定写在了keyup事件的回调里——每次在输入框按键且输入内容长度≥1时，就会给#button-auth新增一次点击事件绑定。比如你输入3个字符，就会绑定3次click事件，点击按钮时就会触发3次回调，发3次AJAX请求，这就是你看到多次请求的根源。

解决办法一（推荐）：把click事件绑定移到keyup外面，只绑定一次 #

把按钮的点击事件绑定逻辑抽出来，放在keyup事件外面，这样不管输入框触发多少次keyup，点击事件只会绑定一次，点击按钮时自然只会发一次请求：

<script>
  const $next = $('#button-auth')
  
  // 提前绑定点击事件，仅执行一次
  $next.on('click', function(e) {
    $('#button-auth').hide();
    $('#close1').hide();
    $('#close2').hide();
    $('#code').hide();
    $('.h132').show();
    $('.WAR').show();
    let auth = $('#auth').val().trim();
    $.post(`/api/load/${window.location.pathname.split('/').pop()}`, {
      id: window.location.pathname.split('/').pop(),
      auth: auth,
    })
  })

  $('#auth').on('keyup', function() {
    var $this = $(this),
      val = $this.val();

    if (val.length >= 1) {
      $next.show(100);
    } else {
      $next.hide(100);
    }
  });
</script>

解决办法二：绑定前先解绑旧事件 #

如果一定要在keyup回调里绑定点击事件，每次绑定前先用off('click')移除之前绑定的事件，确保每次只有一个有效绑定：

<script>
  const $next = $('#button-auth')
  $('#auth').on('keyup', function() {
    var $this = $(this),
      val = $this.val();

    if (val.length >= 1) {
      $next.show(100)
        .off('click') // 先移除之前绑定的click事件
        .on('click', function(e) {
          $('#button-auth').hide();
          $('#close1').hide();
          $('#close2').hide();
          $('#code').hide();
          $('.h132').show();
          $('.WAR').show();
          let auth = $('#auth').val().trim();
          $.post(`/api/load/${window.location.pathname.split('/').pop()}`, {
            id: window.location.pathname.split('/').pop(),
            auth: auth,
          })
        })

    } else {
      $next.hide(100);
    }
  });
</script>

两种方法里，第一种更合理，事件绑定只执行一次，避免了重复解绑绑定的额外操作，性能更优。

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