我們有時會通過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。