javascript - 使用 jQuery 允许按钮点击提交

Question

我有一个带有提交按钮的网页。我的提交按钮如下所示:

<button type="submit" class="btn btn-primary wait-on-click">
  <span>Submit</span>
</button>

当用户单击提交按钮时，我想禁用该按钮并让用户知道正在发生某些事情。为此，我有以下 JavaScript:

$('.wait-on-click').click(function(e) {
  e.preventDefault();
  $(this).prop('disabled', true);
  $('span', this).text('Please wait...');
});

按钮禁用。正文已更新。然而，提交实际上并没有提交到服务器。如果我注释掉 JavaScript 函数的主体，它就可以正常工作。我不明白如何解决这个问题。

谢谢!

Answer 1

我相信你的问题出在这一行

 e.preventDefault();

这会阻止提交按钮的默认行为，即提交!因此，将其删除。

更新

经过测试，发现问题所在。我相信你的问题出在这一行

$(this).prop('disabled', true);

由于某种原因，这会阻止表单提交。因此，将其放入提交处理程序中。

$('.wait-on-click').click(function(e) {
  $('span', this).text('Please wait...');
});

$('form').on('submit', function() {
  $('.wait-on-click').prop('disabled', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form>
  <input name="n" />
  <button type="submit" class="btn btn-primary wait-on-click">
    <span>Submit</span>
  </button>
</form>