Question

我在每个文件中都有这个div：

 <div id="header" class="hide" style="top: 0px; width: 100%; z-index: 1000;">

这个脚本（在每个文档中也是如此）：

$.ajaxSetup({ cache: false });

$(document).ready(function () {

    $("#loading-header").show();

    $.ajax({
        async: true,
        type: 'GET',
        url: '/PersonsAjax/Header',
        data: {},
        success: function (data) {

            $("#loading-header").hide();

            console.debug("Is there a header? " + $("#header").size());
            $("#header").show();  // **** PROBLEM *****
        }
    });

}

我的问题是：
我遇到了一种非常奇怪的行为，有两种情况：

场景1（好）：

文档准备就绪，显示#header
点击链接
加载新文档并显示#header

场景2（problemo）：

文档准备就绪，显示#header
浏览器刷新（使用F5键）
已加载新文档，但并未始终显示#header。

我的第一个想法是：“文档仍在加载，也许还没有#header”，但我的console.debug证明了这不是问题

发生了什么事？ jQuery的show（）和刷新有一个众所周知的问题吗？请注意，我正在阻止缓存ajax调用。我仔细检查了ajax响应，它带来了正确的数据

Answer 1

在这种情况下，我会使用$(window).load(function() {});代替$(document).ready(function (){});。

  $(window).load(function() {
     $("#loading-header").show();

        $.ajax({
            async: true,
            type: 'GET',
            url: '/PersonsAjax/Header',
            data: {},
            success: function (data) {

                $("#loading-header").hide();

                console.debug("Is there a header? " + $("#header").size());
                $("#header").show();  // **** PROBLEM *****
            }


    });
});

Answer 2

$(document).ready(function () {

    $("#loading-header").show();

    $.ajax({
        cache: false,
        url: '/PersonsAjax/Header',
        success: function (data) {
            $("#loading-header").hide();
            //console.debug("Is there a header? " + $("#header").size());
        }
      }).done(showHeader());
    });
    //add a looping function to check for header
    function showHeader(){
         var TO = 0;
         var header = document.getElementById('header');
         if(header){
           header.style.display="block";
         }else if( TO < 10 ){
           setTimeout(showHeader,100);
           TO++;
         }else{
          console.log("showHeader Timed out");
         }
     }

Ajax有一个done函数，因为只有从httpResponse请求onsuccess而实际上没有完成。了解他们如何在jQuery Ajax API文档中编写Here。

您可以尝试使用循环

刷新后使用jquery的show（）

2 个答案: