Question

我在弹出窗口中有四个div，每次单击都会对后端进行ajax调用并绘制右侧。所有四次点击均按用户点击次数划分。当用户点击div我想要禁用其他三个div，直到这个ajax完成。一旦ajax成功，我想为其他三个div启用click事件。就像我想要为所有四次div点击做的那样。

有时服务器响应很慢，我不希望用户单击所有这些响应并显示所有这些响应的繁忙指示符。

非常感谢任何建议。

由于

Answer 1

我看到它完成的一种很好的方式，并且我自己完成的是使用模态'遮罩'叠加。

覆盖整个页面的灰色透明蒙版，除了您正在与之交互的元素，例如。模态弹出窗口。

你可以在弹出窗口中做一个迷你版本，用CSS z-index推送它背后的三个非活动div。

另一种方法是使用jQuery BlockUI plugin。

另一种方式，jQuery不推荐async这会阻止浏览器本身。

var html = $.ajax({
  url: "some.php",
  async: false
 }).responseText;

jQuery还有.ajaxStart()和.ajaxStop()个事件，您可以将加载指示符代码写入。

Answer 2

我会在ajax调用正在进行时将一些全局gAjaxInProgress变量设置为true，并在完成时使用false。在每个点击功能中，您可以检查是否正在进行ajax调用，如果是，则返回。

Answer 3

我建议的一件事是在div上设置一个没有意义的CSS类，然后在执行AJAX调用之前让jQuery检查这个类是否存在。示例（未经测试）：

$("#divContainer > div").bind('click', function() {
    if($(this).hasClass('disabled-during-ajax'))
        return;
    $("#divContainer > div").addClass('disabled-during-ajax');
    $.get('somefile.php', {}, function(data) {
        $("#divContainer > div").removeClass('disabled-during-ajax');
    });
});

Answer 4

var div1 = document.getElementById("div1");
//...grab the other divs...

div2.onclick = false;
div3.onclick = false;
div4.onclick = false;

function div2fcn() { alert('div2 activated'); }

//When you're ready:
div2.onclick = div2fcn;

如何在ajax上启用和禁用div click事件成功

4 个答案: