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()之后;

有谁知道为什么会发生这种情况以及如何解决这个问题？

Answer 1

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

jQuery - AJAX错误：不重新启用提交按钮

1 个答案: