jQuery按钮单次点击触发多次Ajax请求问题求助

问题根源 #

你的代码绑定在turbolinks:load回调中，而Turbolinks每次页面跳转（包括前进后退）都会重新执行这个回调，导致同一个按钮被重复绑定了多次点击事件。单次点击时，所有已绑定的事件都会触发，进而发送多次Ajax请求。

解决方案 #

在绑定新的点击事件前，先移除按钮上已有的点击事件监听，避免重复绑定。同时纠正代码中一处DOM选择器的错误，并添加必要的默认行为阻止。

修改后的完整代码：

$( document ).on('turbolinks:load', function() {
  var $form = $("form");
  var $buttons = $('#soap-access, #rest-access, #email-access, #audview-access', $form);
  var $jobSchedule = $('#client_job_schedule', $form);

  // 先解绑旧的点击事件，再绑定新事件，避免重复绑定
  $buttons.off('click').on('click', function (e) {
    // 阻止按钮默认行为（若按钮为submit类型时必须）
    e.preventDefault();
    e.stopPropagation();
    
    var $button = $(this);
    $button.prop('disabled', true);
    var $parent = $button.parent();
    // 纠正原代码中选择器与变量名匹配错误的问题
    var $signIn = $('.fa-sign-in', $parent);
    var $spinner = $('.fa-spinner', $parent);
    var $success = $('.fa-check', $parent);
    var $error = $('.fa-times', $parent);

    var data = {};
    var $endpoint = '';

    // add stuff to data

    $signIn.toggleClass('d-none');
    $spinner.toggleClass('d-none');
    $success.addClass('d-none');
    $error.addClass('d-none');

    $.ajax({
      type: "GET",
      url: "<%= api_authentication_clients_path %>",
      data: data
    })
      .done(function () {
        $success.removeClass('d-none');
      })
      .fail(function (jqXHR) {
        $error.removeClass('d-none');
        if (jqXHR.responseJSON && jqXHR.responseJSON.message) {
          alert(jqXHR.responseJSON.message);
        } else {
          alert('Error trying to authenticate');
        }
      })
      .always(function () {
        $button.prop('disabled', false);
        $spinner.toggleClass('d-none');
        $signIn.toggleClass('d-none');
      });
  });
});

额外排查点 #

1. 确认按钮的type属性为button而非submit，若为submit，浏览器会默认触发表单提交，即使禁用按钮也可能提前触发事件。
2. 检查项目中其他JS文件是否也绑定了这些按钮的点击事件，导致重复触发。

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