javascript - Jquery:在禁用按钮单击/悬停时显示消息

Question

如果用户单击禁用按钮，我想显示信息消息。我的代码成功了，但信息消息仅出现很短的时间，然后之前的成功消息继续显示。如何更改代码以强制信息消息停止并且不消失？

UPDATED: I made tiny changes in my code and now it disables button just after first click and displays success message(earlier to disable I should click once again)but I'd want if user occasionally press disabled button again he will receive info message. How to make it possible?

$(document).ready(function() {
  $('#s1-btn').click(function(e) {
    e.preventDefault();
    $(this).prop('disabled', true)
    $.post(
      "/run-key-gen-process/",
      onAjaxSuccess
    );

    function onAjaxSuccess(data) {
      if (data == "Key was succesfully generated an tested!") {
        $("#jmessage").addClass("alert alert-success")
          .text(data).fadeOut(6000);
      }
      $('#s1-btn').click(function() {
        $("#jmessage").removeClass("alert alert-success").addClass("alert alert-info")
          .text("Button is disabled since you already generated and tested the key");
      });
    };
  });
})    

模板.html

<div class="row" id="div-st1">
  <div class="col-md-3 ">
    <button type="submit" method="POST" id="s1-btn" class="form-inline btn btn-info pull-left">Generate</button>
  </div>
  <div class="col-md-6 " id="jmessage" role="alert"></div>
</div>

Answer 1

我猜问题是在成功回调中再次重新绑定(bind)了同一按钮上的click事件，您可以更改为:

    $(document).ready(function() {
      $('#s1-btn').click(function(e) {
        e.preventDefault();
        var $this = $(this);
        var isDisabled = $this.is('disabled');
        if (isDisabled) {
          $("#jmessage").removeClass("alert alert-success").addClass("alert alert-info")
            .text("Button is disabled since you already generated and tested the key");
          return !isDisabled;
        } else {
          $this.prop('disabled', !isDisabled); // <-----disable it here.
          $.post(
            "/run-key-gen-process/",
            onAjaxSuccess
          );
        }

        function onAjaxSuccess(data) {
          if (data == "Key was succesfully generated an tested!") {
            $this.prop('disabled', !!data);// <-----enable it here.
            $("#jmessage").removeClass("alert alert-info").addClass("alert alert-success")
              .text(data).fadeOut(6000);
          }
        };
      });
    })