javascript – 如何在ajax调用上隐藏所有内容并禁用所有其他jQuery函数

我有这个ajax功能：

function callpage() {
    $('#formcontent').empty().html('<p class="vent">Pleace wait</p>');
    var form = $('form#sog');
    $.ajax({
        type: form.attr('method'),url: form.attr('action'),data: form.serialize(),success: function(msg) {
            $('#formcontent').css("border","none").html(msg);
        }
    });
}

当它被调用时我想要遮蔽其他东西,那么应该禁用formcontent div和所有其他jquery函数,直到ajax调用成功为止.

更新：
调用callpage时应该禁用的切换​​功能,直到成功为止：

$('#search').hover(
    function () {
        $('#search').animate({width: '400px'},500,function() {});
    },function () {
        $('#search').animate({width: '200px'},500);
        callpage();
    }
);

解决方法

当AJAX调用以 AJAXStart开始时,您可以调用覆盖,然后使用 ajaxComplete隐藏它

$(document).ajaxStart(function(){
   $("#overlay").show();
 });

$(document).ajaxComplete(function(){
   $("#overlay").hide();
 });

或者您可以将所有内容都放入通话中：

$.ajax({
            type: form.attr('method'),beforeSend: function(){$("#overlay").show();},complete: function(){$("#overlay").hide();},success:function(msg){$('#formcontent').css("border","none").html(msg);}
            });

编辑我从另一个答案采取叠加

#modal-overlay {
    position: fixed;
    z-index: 10;
    background: black;
    display: block;
    opacity: .75;
    filter: alpha(opacity=75);
    width: 100%;
    height: 100%;
}

对于您的功能,您可以添加一些额外的逻辑并检查叠加是否可见

$('#search').hover( 
  function () {
        var overlaydisplayed = $("#overlay").is(":visible");
        if(!overlaydisplayed){
          $('#search').animate({width: '400px'},function() { });
         }
  },function () {
        var overlaydisplayed = $("#overlay").is(":visible");
        if(!overlaydisplayed){
          $('#search').animate({width: '200px'},500);
          callpage();
         }
  }
);