禁用所有click/keyup事件，直到ajax调用完成

Question

在ajax调用完成之前，如何禁用所有链接？

我需要在.(click)事件和.on('keyup')触发器上都发生这种情况。

所以我想要的几乎是；

–Ajax链接被触发（点击或按键）

–Ajax调用运行（并且在运行时–所有链接都被禁用）

–Ajax调用完成，链接重新启用。

Answer 1

您可以添加微调器并在前台显示微调器，直到您的ajax请求成功。这是一个示例代码。下面是一个例子。

function OnAjaxStart(ajaxContext) {
$("#spinner").show();
$("a").unbind("click");
$("a").unbind("keyup");
}
function OnAjaxComplete(ajaxContext) {
$("#spinner").hide();
}

function DisplayDataById(actionUrl, data) {
OnAjaxStart();
var request = $.ajax({
url: actionUrl,
data: { data: data},
cache: false
});
request.done(function (data) {
$('#' + divName).empty().html(data);
OnAjaxComplete();
});
}

这是微调器HTML:

<div id="spinner" style="margin: 0px; padding: 0px; position: fixed; right: 0px;
  top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001;
  opacity: .8; filter: alpha(opacity=70); display: none">
  <p style="position: absolute; top: 30%; left: 45%; color: White;">
    Please wait ...<img src="@Url.Content("~=""/images/loading-image.gif")" alt="Loading">
  </p>
</div>

Answer 2

/*  CSS */
#overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 1000000;
}

在ajax调用中使用此

overlay = $("<div id='overlay'></div>").prependTo('body');
    $(document).on("keydown",function(objEvent) {
    if (objEvent.keyCode == 9) {  //tab pressed
        objEvent.preventDefault(); // stops its action
    }
   });

ajax调用完成后使用此

overlay.remove();
$(document).off("keydown");