代码适用于Firefox但不适用于Chrome

Question

此代码与Firefox完美配合，但与Chrome无关。

我正在使用带有chrome的网络服务器，因此.load()可以正常工作。

$(function(){
  $("#header").load("header.html"); 
});


$(document).ready(function(){
  $('#notif').text("5");
}

当我使用chrome进行调试时，代码执行正常，但<span id="notif"></span>中没有插入任何内容。

<span id="notif"></span>中的header.html是用JS动态加载的。

同样，它在Firefox中运行良好，但在Chrome中无效。

Answer 1

加载是异步的，因此文档将在加载结束之前就绪（并已触发）。 简而言之，当文档准备就绪时，$（'＃notif'）不存在，因为它尚未加载。

 $(function(){
   $("#header").load("header.html",function(){
     $('#notif').text('5');
   }); 
 });

不是第二个参数，即匿名函数，将在成功完成加载后启动。

firefox和chrome之间的区别可能与下载速度有关，但我不是百分百肯定。需要进行更多测试。

  

有时（尤其是IE）通过断点调试代码，可能会导致document.ready触发器有足够的延迟来完成加载。所以没有发现“缺点”。