javascript - 单击 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. success
2. error

$(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>