我需要在启动Ajax请求时禁用div(以便它不再接收点击)并在Ajax完成时重新启用它。我还想在这个过程中显示一个加载gif。我认为这可以使用ajaxStart
和ajaxStop
来完成。但是,如果我是正确的,这将激发任何启动或停止的Ajax请求。这就是问题所在。我在页面上有多个div,其中任何一个都可以触发Ajax请求。如何禁用/启用单击的“特定div”,如何使用ajaxStart
,ajaxStop
或任何其他方法显示/隐藏相应的加载gif。请注意,如果这涉及单击事件的绑定/解除绑定,则建议的方法需要保持与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);
}
});
});
问候,约翰
答案 0 :(得分:4)
禁用按钮,只需更改当前的班级按钮。
你可以用这个:
$('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);
}
});
});
答案 1 :(得分:0)
简单地创建一些辅助功能来启用/禁用功能对此非常有效。只需在单击时调用disable fn,并在ajax成功时调用enable函数。
function disableButton( button ) {
//disable actions
}
function enableButton( button ) {
//enable actions
}
$('body').on('click', '.button', function(e){
e.preventDefault();
disableButton( $(this) );
$.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');
enableButton( $(this) );
}
},
error : function() {
alert(error);
}
});
});