我需要在 Ajax 请求开始时禁用一个 div(以便它不再接收点击),并在 Ajax 完成时重新启用它。我还希望在此过程中显示加载 gif。我认为这可以使用 ajaxStart
和 ajaxStop
来完成。但是,如果我是正确的,这些将触发任何启动或停止的 Ajax 请求。问题来了。我在一个页面上有多个 div,其中任何一个都可以触发 Ajax 请求。如何禁用/启用被单击的“特定 div”,以及如何使用 ajaxStart
、ajaxStop
或任何其他方法显示/隐藏其相应的加载 gif。请注意,如果这涉及点击事件的绑定(bind)/取消绑定(bind),那么建议的方法需要保持与 jQuery on()
的兼容性。
HTML 看起来像这样:
<div class="button white"><img src="loading.gif" /></div>
<div class="button white"><img src="loading.gif" /></div>
<div class="button white"><img src="loading.gif" /></div>
Ajax 的 Javascript 看起来像这样:
$('body').on('click', '.button', function(e){
e.preventDefault();
$.ajax({
url : ajaxVars.ajaxurl,
context : this,
type :'POST',
async : true,
cache : false,
timeout : 1000,
data : { action : 'test_action' },
success : function(response) {
if (response == 1) {
$(this).toggleClass('white').toggleClass('green');
}
},
error : function() {
alert(error);
}
});
});
问候,约翰
最佳答案
要禁用按钮,只需更改当前类按钮即可。
你可以使用这个:
$('body').on('click', '.button', function(e){
e.preventDefault();
$(this).removeClass('button').addClass('disabledbutton');
$.ajax({
url : ajaxVars.ajaxurl,
context : this,
type :'POST',
async : true,
cache : false,
timeout : 1000,
data : { action : 'test_action' },
success : function(response) {
if (response == 1) {
$(this).toggleClass('white').toggleClass('green');
$(this).removeClass('disabledbutton').addClass('button');
}
},
error : function() {
alert(error);
}
});
});
关于jquery - 在 Ajax 启动时禁用 div click 并在 Ajax 完成时重新启用它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10075108/