javascript - 文档就绪触发，但其附加功能不触发

Question

我本质上是一名应用工程师，对 Javascript 很陌生，但自从我在办公室接受了一项涉及将我们的内部测试站点移植到新 UI 的任务以来，我学得很快。显然，我会尝试发布少量代码，以免损害公司可能认为敏感的任何内容。我四处寻找这个问题的答案，然后输入 $.isReady进入 Chrome 调试器并收到 true 消息后，我挥舞着白旗并决定在这里提问。

我有一个奇怪的问题，我的 $(document).ready()调用触发，但 .ready() 中包含的函数参数没有。这是函数本身:

 $(document).ready(function () {
        $("p").text("The DOM is now loaded and can be manipulated.");
        $.getJSON('/Home/RetrieveServersJson', function (data) {
            servers = data;
            for (i = 0; i < servers.length; i++) {
                if (servers[i].IsGT)
                    gtServers[length] = servers[i];
                else
                    mrSixSservers[length] = servers[i];
            }
            alert(servers.length + " " + mrSixSservers.length + " " + gtServers.length);
        });
    });

正如您可能已经猜到的，开头的行只是一个修改 <p> 的测试。最初声明“尚未准备好”的元素。该网站正在运行 jQuery 1.10.2。以下是我确定的一些事情:

1. 调用$(document).ready()据我所知，火灾。我从这样的事实中推断出这一点:在函数上放置的断点在那里停止，然后我可以在调用解析之前单步执行 jQuery 库，但即使我在那里放置断点，它也永远不会进入处理程序函数，而不是返回到源代码的顶部。

2. 我几乎可以肯定，这不是我的脚本引用的问题。我使用 bundle 来保存脚本，但渲染的脚本在页面上的样子如下:

   <script src="/Scripts/jquery.min.js"></script>
   <script src="/Scripts/jquery-ui.custom.min.js"></script>
   <script src="/Scripts/bootstrap.min.js"></script>
   <script src="/Scripts/excanvas.min.js"></script>
   <script src="/Scripts/jquery.flot.min.js"></script>
   <script src="/Scripts/jquery.flot.resize.min.js"></script>
   <script src="/Scripts/jquery.sparkline.min.js"></script>
   <script src="/Scripts/fullcalendar.min.js"></script>
   <script src="/Scripts/jquery.jpanelmenu.min.js"></script>
   <script src="/Scripts/jquery.nicescroll.min.js"></script>
   <script src="/Scripts/unicorn.js"></script>
   <script src="/Scripts/unicorn.dashboard.js"></script>
   

   此外，我还有另一个页面使用完全相同的脚本引用，并且我在那里测试了文档就绪功能，效果很好。

3. 我的所有其他 Javascript 函数和 jQuery 调用都完全按照预期工作。
4. 我尝试将就绪函数减少为仅警报调用，但没有成功。我将警报调用更改为 <p> 中的更改元素只是为了查看 DOM 的准备是否被延迟。
5. 此时，我认为 DOM 可能永远不会显示就绪。但是，正如我之前提到的，我将 $.isReady 放入 Chrome 调试器控制台，它返回 true。
6. 没有语法错误；我已经检查并确保所有花括号都匹配。
7. 事实上，除了 Uncaught Invalid dimensions for plot, width = null, height = null 之外，控制台没有显示任何错误，这在 jquery.flot.min.js 加载时发生。

有人知道什么可能导致 $.isReady 显示 true 但 $(document).ready() 函数根本不触发？

Answer 1

如果我理解正确的话，你的第四点很重要。为了确认，您是说您将问题中发布的代码替换为:

$(document).ready(function(){
    alert("I am here");
});

它不起作用？

如果是这样，那么问题肯定出在您引用的脚本库之一中。

作为测试，我可以建议:

1. 删除除上述“我在这里”测试之外的所有 js 代码。

2. 将捆绑的库替换为您在上面发布的分割列表:

3. 注释掉所有上述库(当然，jQuery 除外，因为您正在使用它进行测试)并一次添加一个库，直到找出罪魁祸首。

如果“我在这里”在单独引用脚本时起作用，那么脚本包就会出现问题。