Jquery:在禁用按钮单击/悬停时显示消息
Jquery:在禁用按钮单击/悬停时显示消息
提问于 2016-02-19 16:25:58
我想要显示信息消息，如果用户点击禁用按钮。我的代码成功了，但是info消息只会出现很短的时间，然后会继续显示之前的成功消息。如何更改代码以强制info消息停止且不消失？
更新:我在我的代码中做了很小的改变，现在它在第一次点击后禁用按钮，并显示成功消息(之前要禁用，我应该再点击一次)，但我希望如果用户偶尔再次按下禁用按钮，他将收到信息消息。如何使其成为可能？
$(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>回答 2
Stack Overflow用户
回答已采纳
发布于 2016-02-20 17:48:49
我像这样修改了我的代码，现在它做了它应该做的事情。如果用户单击按钮，它将运行密钥生成，显示成功消息并禁用按钮。如果用户在禁用的按钮上单击/移动鼠标，则会出现信息消息。
$(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);
}
};
});
});Stack Overflow用户
发布于 2016-02-19 16:35:04
我猜问题是在成功回调中重新绑定同一个按钮上的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);
}
};
});
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35500584
复制相关文章
相似问题