我有以下代码:
$('#page-refresh').click( function() {
$.ajax({
url: "/page1.php",
cache: false,
dataType: "html",
success: function(data) {
$('#pagelist').html(data);
}
});
return false;
});
在这段代码中,是否有可能在ajax成功功能上将#page-refresh点击禁用5秒钟,然后重新启用它?基本上,如果一个人单击该按钮并且发生此操作,我不希望他们单击并再次运行此操作5秒钟。我查看了delay()来对此取消绑定(bind),然后再次对其进行绑定(bind),但是一旦取消绑定(bind),它就再也不允许我单击该按钮了。
最佳答案
如果“#page-refresh”确实是一个按钮(一个button
或input type="button"
元素),则可以使用其 disabled
属性,然后设置超时来恢复它:
$('#page-refresh').click( function() {
var refreshButton = this;
$.ajax({
url: "/page1.php",
cache: false,
dataType: "html",
success: function(data) {
$('#pagelist').html(data);
refreshButton.disabled = true;
setTimeout(function() {
refreshButton.disabled = false;
}, 5000);
}
});
return false;
});
如果不是真正的按钮,则可以模拟
disabled
属性。我将在此处使用一个类来完成此操作,以便您可以通过CSS为用户显示禁用状态:$('#page-refresh').click( function() {
var $refreshButton = $(this);
if (!$refreshButton.hasClass('disabled')) {
$.ajax({
url: "/page1.php",
cache: false,
dataType: "html",
success: function(data) {
$('#pagelist').html(data);
$refreshButton.addClass('disabled');
setTimeout(function() {
$refreshButton.removeClass('disabled');
}, 5000);
}
});
return false;
});
请注意,在第一种情况下,我保留了对DOM元素的引用(
var refreshButton = this;
),但是在第二种情况下,我保留了围绕它的jQuery包装器(var $refreshButton = $(this);
)的引用。那只是因为jQuery使测试/添加/删除类名变得容易。在这两种情况下,一旦事件处理程序中的闭包被释放,该引用即被释放(在上面,即ajax调用完成后的五秒钟)。您说过,您特别想在ajax调用完成后将其禁用,但是正如Marcus在下面指出的那样,您可能想在启动ajax调用时将其禁用。只需将禁用位稍稍向上移动一点,并为未调用
error
的情况添加success
处理程序(无论如何,error
处理程序通常是个好主意):实按钮:
$('#page-refresh').click( function() {
var refreshButton = this;
refreshButton.disabled = true; // <== Moved
$.ajax({
url: "/page1.php",
cache: false,
dataType: "html",
success: function(data) {
$('#pagelist').html(data);
setTimeout(function() {
refreshButton.disabled = false;
}, 5000);
},
error: function() { // <== Added
refreshButton.disabled = false;
}
});
return false;
});
通过“禁用”类进行模拟:
$('#page-refresh').click( function() {
var $refreshButton = $(this);
if (!$refreshButton.hasClass('disabled')) {
$refreshButton.addClass('disabled'); // <== Moved
$.ajax({
url: "/page1.php",
cache: false,
dataType: "html",
success: function(data) {
$('#pagelist').html(data);
setTimeout(function() {
$refreshButton.removeClass('disabled');
}, 5000);
},
error: function() { // <== Added
$refreshButton.removeClass('disabled');
}
});
return false;
});
关于jQuery禁用链接5秒钟,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/4591088/