jquery - 单击一次后，如何禁用DIV“像提交按钮一样”？

Question

我有一个像提交按钮一样工作的 div，所以当用户单击它时，它会提交一个表单并向服务器发送一个 ajax 请求。我遇到的问题是，如果用户两次单击按钮，即使它是 AJAX 请求，它也会创建重复项。所以我想要做的只是禁用并将其重新命名为“请稍候......”，直到请求完成。防止重复提交。

所以我的问题是如何在点击后使用 jQuery 重命名和禁用“灰色”一个 div？

谢谢

Answer 1

使用一个：

$('#mydiv').one('click', function(){ // one : only once
  $.ajax({ ... });// launch your task
  $(this).html('Please wait...') // change the text
     .css('background-color','#444'); // and the background color
});

Answer 2

您可以使用几种方法：

• 隐藏您的“提交” div 并在其位置显示一个不同的“请稍候...” div

• 单击时在 div 上设置 disabled 属性，并在提交处理程序中检查该属性

  $("div.submit").click(function(e) {
      if ($(this).prop("disabled"))
          return false;
      // any other error checking, setup etc...
      $(this).prop("disabled", true);
      // submit the request...
  });
  

您还可以使用全局标志或 jQuery 的 .data() 函数来标记表单何时提交，但我建议使用属性方法。请求完成后，您可以将 disabled 属性设置为 false，从而允许稍后重新提交表单（如果需要）。