jQuery：在禁用的按钮单击/悬停时显示消息

debugcn 发表于 Dev

安德烈（Andriy）

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

更新：我在代码中做了微小的更改，现在它会在第一次单击后立即禁用按钮并显示成功消息（禁用之前，我应该再次单击一次），但是我希望如果用户偶尔再按一次禁用按钮，他将收到信息消息。如何使其成为可能？

$(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");
      });
    };
  });
})

template.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>

安德烈（Andriy）

我已经像这样修改了我的代码，现在它做了它应该做的事情。如果用户单击按钮，它将运行密钥生成，显示成功消息，并且按钮被禁用。如果用户在禁用按钮上单击/移动鼠标，则会出现消息信息。

$(document).ready(function() {
  $('#s1-btn').click(function(e) {
    e.preventDefault();
    $(this).prop('disabled', true);
    $("#div-st1").mouseenter(function() {
      $("#jmessage").removeClass("alert alert-success").addClass("alert alert-info")
        .text("Button is disabled since you already generated and tested the key");
    });
    $.post(
      "/run-key-gen-process/",
      onAjaxSuccess
    );

    function onAjaxSuccess(data) {
      if (data == "Key was succesfully generated an tested!") {
        $("#jmessage").addClass("alert alert-success")
          .text(data);
      }
    };
  });
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。