2

我需要在 Ajax 请求开始时禁用 div（以便它不再接收点击）并在 Ajax 完成时重新启用它。我还希望在此过程中显示加载 gif。我认为这可以使用ajaxStartand来完成ajaxStop。但是，如果我是正确的，这些将触发任何启动或停止的 Ajax 请求。问题来了。我在一个页面上有多个 div，其中任何一个都可能触发 Ajax 请求。如何禁用/启用单击的“特定 div”以及如何使用 或任何其他方法显示/隐藏它的相应加载ajaxStartgif ajaxStop。请注意，如果这涉及到 click 事件的绑定/解除绑定，那么建议的方法需要保持与 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);
        }
   });
});

问候，约翰

4

2 回答 2

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);
    }

   });
});
于 2012-04-09T15:06:33.583 回答
0

简单地创建一些用于启用/禁用功能的辅助函数就可以很好地实现这一点。只需在单击时调用禁用 fn，并在 ajax 成功时调用启用函数。

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);
        }
   });
});
于 2012-04-09T15:01:28.727 回答