我需要在 Ajax 请求开始时禁用一个 div(以便它不再接收点击),并在 Ajax 完成时重新启用它。我还希望在此过程中显示加载 gif。我认为这可以通过使用来完成ajaxStart
and ajaxStop
。但是,如果我是正确的,这些将触发任何启动或停止的 Ajax 请求。问题来了。我在一个页面上有多个 div,其中任何一个都可以触发 Ajax 请求。如何禁用/启用单击的“特定 div”以及如何使用以下命令显示/隐藏其相应的加载 gifajaxStart
, ajaxStop
或任何其他方法。请注意,如果这涉及点击事件的绑定/取消绑定,那么建议的方法需要保持与 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);
}
});
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)