事先聲明：本文由初學者撰寫，爲一次探索的過程，可能有不嚴謹和準確的地方，望讀者多多諒解並積極指正！
場景描述：
在一次前端開發過程中，我使用了一個網頁模板，該模板包含一個主頁和四個子頁面，如下圖：
具體的效果是，點擊主頁中的一個按鈕會在彈框內顯示子頁面的內容，如下圖：
具體的實現是在主頁面中留出面板，並在點擊按鈕時通過jquery的load方法將子頁面加載到面板中：
index.html 部分代碼
<div class="cd-folding-panel">
<div class="fold-left"></div> <!-- this is the left fold -->
<div class="fold-right"></div> <!-- this is the right fold -->
<div class="cd-fold-content">
<!-- content will be loaded using javascript -->
</div>
<a class="cd-close" href="#0"></a>
</div> <!-- .cd-folding-panel -->
main.js 部分代碼
var foldingContent = foldingPanel.find('.cd-fold-content'); foldingContent.load(url+' .cd-fold-content > *', function(event){ setTimeout(function(){ $('body').addClass('overflow-hidden'); foldingPanel.addClass('is-open'); mainContent.addClass('fold-is-open'); }, 100);
});
問題描述：
問題主要出在子頁面上，如上圖展示過的，我想要在子頁面實現獲取用戶輸入信息，並提交到服務器進行查詢，然後將獲取到的json信息以表格的形式展示出來，大概要求的效果是這樣的（不要在意表格的內容，那只是示例）：
於是我就把相應的代碼寫到了item1.html的<script>標籤中
item1.html（這部分可以不看）
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<title>在線快遞查詢系統</title>
</head>
<body>
<div class="cd-fold-content single-page">
<h2>查快遞</h2>
<div style="width:80%;height:100px;margin:30px">
<form id="form1" onsubmit="return false" action="##">
<input required='' type='text' id="phoneNumber">
<label alt='請輸入手機號碼' placeholder='手機號碼'></label>
<input id="queryBtn" type="submit" onclick="postQueryMsg()" value="Submit" >
</form>
<div style="height:50px">
</div>
<table id="table" class="gridtable" style="display:none">
<tr>
<th>BrandName</th>
<th>Modul</th>
<th>Quantity</th>
<th>Datecode</th>
<th>Remark</th>
</tr>
</table>
</div>
</div>
<script src="js/jquery-2.1.1.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
<script>
function postQueryMsg(){
$.ajax({
type:"get",
url:"resources/haha.json",
dataType:"json",
async:false,
success:function(data){
var table=document.getElementById("table");
table.style.display = 'block';
for(var i=0;i<data.length;i++){
var row=table.insertRow(table.rows.length);
var c1=row.insertCell(0);
c1.innerHTML=data[i].BrandName;
var c2=row.insertCell(1);
c2.innerHTML=data[i].Modul;
var c3=row.insertCell(2);
c3.innerHTML=data[i].Quantity;
var c4=row.insertCell(3);
c4.innerHTML=data[i].Datecode;
var c5=row.insertCell(4);
c5.innerHTML=data[i].Remark;
}
},
error:function(errorThrown){
console.log(errorThrown);
}
});
}
</script>
</body>
</html>
於是運行在Chrome時出現了 “點擊Submit按鈕沒有反應” 的問題，按F12打開控制檯，查找到如下錯誤：
發現是由於沒找到 postQueryMsg（我的按鈕點擊方法）的定義造成的，然後我就尋思可能是寫在 item1.html 中的腳本失效了。
上網搜索一下，發現問題在於 jquery 的 load 方法會把被加載頁面的 script 腳本忽視掉，而網絡上給出的解決方案也大都不奏效或不能令我滿意。
解決過程：
問題的解決是從我開始深入認識 load 方法開始的：
以下是W3School給出的關於load方法的定義
load() 方法通過 AJAX 請求從服務器加載數據，並把返回的數據放置到指定的元素中。
由是我注意到這個方法似乎是把被加載頁面 “放入” 加載頁面，那麼主體按理來說是加載頁面，因此如果我把要在被加載頁面運行的腳本放到加載頁面裏，應當就可以正常運行了。而控制檯中的報錯信息也證實了我的想法（出錯位置是在 index.html 而不是 item1.html）
爲了保持代碼美觀，這次我使用了外置 js 腳本：
index.html 部分代碼
<script src="js/itemAction.js"></script>
itemAction.js 內容
function postQueryMsg(){ $.ajax({ type:"get", url:"resources/haha.json", dataType:"json", async:false, success:function(data){ var table=document.getElementById("table"); table.style.display = 'block'; for(var i=0;i<data.length;i++){ var row=table.insertRow(table.rows.length); var c1=row.insertCell(0); c1.innerHTML=data[i].BrandName; var c2=row.insertCell(1); c2.innerHTML=data[i].Modul; var c3=row.insertCell(2); c3.innerHTML=data[i].Quantity; var c4=row.insertCell(3); c4.innerHTML=data[i].Datecode; var c5=row.insertCell(4); c5.innerHTML=data[i].Remark; } }, error:function(errorThrown){ console.log(errorThrown); } }); }
如此就能正常運行了
待解決的問題：
就標題而言，這次探索已經圓滿完成，但事實上仍然有一個問題懸而未決，希望路過的大佬能替我指正：
問題一：
在上文中 “問題描述” 部分中，我刻意提及 “在Chrome中” 出現點擊按鈕無反應的問題，原因是我在 IE 瀏覽器中打開界面時是可以運行的，並且控制檯中沒有任何報錯信息：
希望各位大佬不吝賜教，謝謝！