我们有时会通过ajax动态获取一段Html代码，并且将这段代码通过javascript放到页面的Dom结构中去。 而很多时候通过ajax动态获取的Html代码中也包含javascript代码，有一点需要注意的是 通过ajax动态加载Html元素到页面Dom 和 浏览器访问页面时加载页面Dom 时javascript的执行顺序是有所不同的。
我们先来看一个Html页面的代码，这个页面会通过ajax去Web服务器获取一段Html代码片段并通过javascript加载到页面的Dom结构中去，我们把这个Html页面在本文中称作主页面:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta charset="utf-8" /> 6 <script type="text/javascript" src="Scripts/jquery.js"></script> 7 <script type="text/javascript"> 8 alert("Main_1>>" + "主页面script标签开始加载"); 9 10 alert("Main_2>>" + ($("#htmlContainer").length > 0 ? "主页面找到htmlContainer" : "主页面未找到htmlContainer")); 11 12 $(function () { 13 alert("Main_4>>" + "主页面document.ready执行"); 14 alert("Main_5>>" + ($("#htmlContainer").length > 0 ? "主页面找到htmlContainer" : "主页面未找到htmlContainer")); 15 16 $.ajax({ 17 url: "PartialHtmlPage.html", 18 data: null, 19 type: "GET", 20 contentType: "text/html", 21 success: function (result) { 22 alert("Main_6>>" + "主页面ajax已经获取到部分页html代码，开始加载部分页的html代码到主页面dom结构"); 23 $("#htmlContainer").html(result); 24 alert("Main_7>>" + "主页面加载部分页html代码到主页面dom结构完毕"); 25 }, 26 error: function (result) { 27 alert(result.statusText); 28 } 29 }); 30 }) 31 32 alert("Main_3>>" + "主页面script标签加载完毕"); 33 </script> 34 </head> 35 <body> 36 <div id="htmlContainer"> 37 38 </div> 39 </body> 40 </html>
我们在页面中的一些关键位置用alert打出了一些信息以表示当前页面执行到什么地方了，并通过数字标注了alert执行时的顺序。我们执行页面后会发现在主页面中，当用浏览器去访问页面通过常规方式加载页面Dom结构时，上面代码中执行到script标签时，script标签下的Html元素都还没有加载到Dom结构里面去，因为上面第10行代码显示的是 主页面未找到htmlContainer 。而且jquery中的document.ready事件是在整个页面的Dom结构生成完毕后才会被执行，因为第14行代码显示的是 主页面找到htmlContainer ，并且第13行代码要后于32行代码执行，说明当执行到13行代码的时候，整个页面的Html标签都已经加载完毕了。
我们再来看看主页面ajax方法获取到的Html代码片段（PartialHtmlPage.html），我们把Html代码片段在本文中称作部分页：
1 <script type="text/javascript"> 2 alert("Partail_1>>"+"部分页script标签开始加载"); 3 alert("Partail_2>>" + ($("#partialPageDiv").length > 0 ? "部分页找到partialPageDiv" : "部分页未找到partialPageDiv")); 4 5 $(function () { 6 alert("Partail_3>>" + "部分页document.ready执行"); 7 }); 8 9 alert("Partail_4>>" + "部分页script标签加载完毕"); 10 </script> 11 <div id="partialPageDiv"> 12 测试div，看使用ajax动态加载html到页面dom里面时，js是否能够找到这个div 13 </div>
上面部分页的代码会在主页面第23行代码被加载到主页面Dom结构中去，大家可以观察下部分页alert弹出信息的顺序，我们来看看和主页面加载Dom结构时有什么不同。当执行到部分页的script标签时，script标签下的Html元素都已经被加载到Dom结构里面去了，因为上面部分页第3行代码显示的是 部分页找到partialPageDiv 。部分页中jquery的document.ready事件在部分页的Dom结构生成完毕前就被执行了，因为上面部分页第6行代码要先于第9行代码执行，实际上在部分页中调用 $(function () {})时里面的function就被立即执行了，而不是像主页面一样要等整个页面的Dom结构加载完毕后才执行。
请大家通过javascript动态获取Html片段加载到页面Dom结构时要注意上面两个问题，否则很容易引起一些不必要的Bug。