禁用div单击Ajax start并在Ajax完成时重新启用它 [英] Disable div click on Ajax start and re-enable it on Ajax complete
问题描述
我需要在启动Ajax请求时禁用div(以便它不再接收点击)并在Ajax完成时重新启用它。我还想在这个过程中显示一个加载gif。我认为这可以使用 ajaxStart
和 ajaxStop
来完成。但是,如果我是正确的,这将激发任何启动或停止的Ajax请求。这就是问题所在。我在页面上有多个div,其中任何一个都可以触发Ajax请求。如何禁用/启用单击的特定div,如何使用 ajaxStart
, ajaxStop <显示/隐藏相应的加载gif? / code>或任何其他方法。请注意,如果这涉及到click事件的绑定/解除绑定,那么建议的方法需要在()
上保持与jQuery 的兼容性。
I need a div to be disabled (so that it no longer receives click) on start of an Ajax request and re-enable it on Ajax complete. I also want a loading gif to be shown during the process. I think that this could be accomplished using ajaxStart
and ajaxStop
. But, if I am correct these would fire for any Ajax request that start or stops. Here comes the problem. I have multiple div's on a page and anyone of these could trigger an Ajax request. How can I disable/enable the "specific div" that was clicked and how can I display/hide it's corresponding loading gif either using ajaxStart
, ajaxStop
or any other method. Please note that if this involves binding/unbinding of click event then the method suggested needs to maintain compatibility with 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如下所示:
The Javascript for Ajax looks like this:
$('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);
}
});
});
问候,约翰
推荐答案
禁用按钮,只需更改当前的班级按钮。
to disable button, simply change current class button.
你可以使用这个:
$('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);
}
});
});
这篇关于禁用div单击Ajax start并在Ajax完成时重新启用它的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!