javascript - jQuery - AJAX 错误 : does not re-enable submit button

Question

我一直在努力获取阻止用​​户发送多个 AJAX 请求的代码。 .one()对我不起作用。我决定使用 .prop('disabled');在我的“提交”按钮上阻止它发送任何更多的 AJAX 请求。

流线的理论是:用户点击提交按钮。发送 AJAX。禁用提交。 AJAX 完成。重新启用提交按钮。

我tried对此进行测试，但似乎不起作用。这是我的代码片段(与我刚刚链接的 jsfiddle 相同):

//runs on $(document).ready();
console.log($('#submit').prop('disabled'));

$(document).on('click', '#submit', function(e) {
  $.ajax({
      type: 'GET',
      url: '/FakeURL',
    })
    .done(function(data, textStatus, jqXHR) {
      $('#gimme-data').append(data, textStatus, jqXHR);
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
      $('#gimme-data').append(jqXHR, textStatus, errorThrown);
    })
    .always(function(data_jqXHR, textStatus, jqXHR_errorThrown) {
      $('#gimme-data').append(data_jqXHR, textStatus, jqXHR_errorThrown);
      $('#submit').prop('disabled', 'false');
      console.log($('#submit').prop('disabled'));
    });
});
$(document).ajaxStart(function() {
  $('#submit').prop('disabled', 'true');
  console.log($('#submit').prop('disabled'));
}).ajaxStop(function() {
  $('#submit').prop('disabled', 'false');
  console.log($('#submit').prop('disabled'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<input type="submit" id="submit" class="first" value="GO!" title="Log In">
<div id="gimme-data">

</div>

正如您在运行时看到的那样，$('#submit').prop('disabled')始终保持真实(除了在开始时，在任何事情发生之前)。

这是在 $('#submit').prop('disabled', 'false'); 之后在 .ajaxStop(); 上设置和 .always() ;

Does anyone know why this happens and how to fix it?

Answer 1

您应该将一个 bool 值 值传递给prop 方法，因为disabled 是一个 bool 值属性。 'false' 是非空字符串，它被强制转换为 true bool 值。请改用 false。