单击1点后灰色按钮-html/css/js

Question

为什么下面不起作用？我想要它，所以当按下一个按钮时，JS仍然执行，但该按钮随后被禁用并"灰色"，因此不能再次单击。

$(document).ready(function() {
  $('#contact-submit').on('click', function(e) {
    e.preventDefault();
    var btn = $(e.target);
    btn.attr("disabled", "disabled"); // disable button
    var url = 'https://hooks.slack.com/services/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
    var text = 'xxxxxxxxxxxxxxxxxxxxxxxxx'
    $.ajax({
      data: 'payload=' + JSON.stringify({
        "text": text
      }),
      dataType: 'json',
      processData: false,
      type: 'POST',
      url: url
    });
  });
});

#contact button[type="submit"] {
  cursor: pointer;
  width: 100%;
  border: none;
  background: #4CAF50;
  color: #FFF;
  margin: 0 0 5px;
  padding: 10px;
  font-size: 15px;
}
#contact button:disabled[type="submit"] {
  cursor: pointer;
  width: 100%;
  border: none;
  background: #ffffff;
  color: #FFF;
  margin: 0 0 5px;
  padding: 10px;
  font-size: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Call</button>

Answer 1

您在调用ajax命令后实际上没有重新启用按钮，有两个有用的事件可以处理ajax调用的回调结果：

1. 成功
2. 错误

$(document).ready(function() {
  $('#contact-submit').on('click', function(e) {
    e.preventDefault();
    var btn = $(e.target);
    btn.attr("disabled", "disabled"); // disable button
    var url = 'https://hooks.slack.com/services/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
    var text = 'xxxxxxxxxxxxxxxxxxxxxxxxx'
    $.ajax({
      data: 'payload=' + JSON.stringify({
        "text": text
      }),
      dataType: 'json',
      processData: false,
      type: 'POST',
      url: url,
      success: function(data) {
        console.log("OK")
        btn.removeAttr("disabled");
      },
      error: function(data) {
        btn.removeAttr("disabled");
      }
    });
  });
});

#contact button[type="submit"] {
  cursor: pointer;
  width: 100%;
  border: none;
  background: #4CAF50;
  color: #FFF;
  margin: 0 0 5px;
  padding: 10px;
  font-size: 15px;
}
#contact button:disabled[type="submit"] {
  cursor: pointer;
  width: 100%;
  border: none;
  background: #ffffff;
  color: #FFF;
  margin: 0 0 5px;
  padding: 10px;
  font-size: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Call</button>