使用jquery的load方法載入html頁面，但是html引入的js不生效
Write By Monkeyfly
以下內容均為原創，如需轉載請註明出處。
前提
有一個公共的登入彈框頁面需要在多個頁面引用，百度後就使用了jQuery 的 load 方法。
做法：
- 將公共的
html頁面提取出來，放在一個獨立的HTML檔案中。 - 然後在需要使用的
html頁面中，使用jQuery的load方法進行引用即可。 - 注：提取的部分，不需要包含多餘的
<head>、<body>等標籤，只需要放置你所用到的標籤即可。
用法：
具體程式碼如下：
//HTML部分：
<div id="login_box" class="login-box"> //js部分：
//當前頁面的js檔案
<script src="../../js/carriage/carriage.js"></script>
<script>
$(function(){
/*公共部分：登入彈框*/
$("#login_box").load("../../template/login/login.html");
})
</script>
//引入的公共登入頁面的js檔案
<script src="../../template/login/login.js"></script> 不想看程式碼的可以看圖：
carriage.js 檔案中的部分 html 程式碼如下所示
login.js 檔案中的 部分 js 程式碼如下所示：
發現問題
注：這裡以 關閉按鈕 （即 .layer-close-icon 元素）為例，進行了測試和除錯。
- 程式碼執行後發現：登入彈框頁面中所有元素的繫結事件都沒有被觸發。點選關閉按鈕也沒有反應。
- 控制檯除錯後發現：在為
$(".layer-close-icon")註冊點選事件時，根本就沒有找到該元素。【如下圖所示】
- 在控制檯檢視當前的
HTML結構，發現：此時，登入框並沒有被載入進來。所以，頁面元素目前還不存在，當然獲取不到該元素，也就不能為它註冊點選事件了。【如下圖所示】
後來思考了許久，也問了一下同事，得出一個結論：這與頁面中 js 檔案 的載入和執行順序有關係。
- 頁面上的
js程式碼是HTML頁面的一部分，所以js在頁面裝載時的執行順序就是其引入<script />標籤的出現順序。 <script />標籤裡面的js程式碼 或者 通過src引入的外部js，都是按照其語句出現的順序執行，而且執行過程是文件裝載的一部分。- 當頁面中的
DOM元素全部載入完畢後就執行jQuery中的$(document).ready(function(){})方法，或簡寫為：$(function(){})。 - 如果在執行
.ready()方法之前有js程式碼存在，那麼會先執行ready()方法 之前的js程式碼，然後再執行.ready()方法。
解決問題
然後通過百度搜了一段時間，突然發現一個貌似可行的解決方法： jQuery 中的 $.getScript() 方法。
為什麼說貌似可行呢？一是沒見過，二是沒用過，三是感覺應該沒問題。
經過測試，發現確實可行。具體程式碼如下圖所示：
jQuery.getScript() 函式用於動態載入JS檔案，並在全域性作用域下執行檔案中的JS程式碼。
請注意： 該函式是通過非同步方式載入資料的。不要直接在 jQuery.getScript() 執行後直接呼叫該 js 檔案中的變數或函式。
結束語
至此，問題就已經被解決了。
後來同事又給我提供了一個新的思路：
載入完 HTML 檔案之後，使用 js 動態建立一個 script 標籤，然後通過它的 src 屬性，指向你所要引入的js檔案的路徑。
而且load方法可以使用一個回撥函式作為第二個引數，所以我們可以在回撥函式中動態的將 js 檔案載入進來。
具體程式碼如下所示：【親測可行】
<script>
$(function(){
/*公共部分：登入彈框*/
$("#login_box").load("../../template/login/login.html",function(){
var sc = document.createElement("script");
sc.src= "../../template/login/login.js";
$("body").append(sc);
});
/* $.getScript("../../template/login/login.js",function(){
// alert("載入成功！");
}); */
})
</script>
參考資料：
相關推薦
使用jquery的load方法載入html頁面，但是html引入的js不生效
Write By Monkeyfly 以下內容均為原創，如需轉載請註明出處。 前提 有一個公共的登入彈框頁面需要在多個頁面引用，百度後就使用了jQuery 的 load 方法。 做法： 將公共的 ht
html 引入js不生效 解決辦法
1.問題描述，js放在<head>裡面不生效 js存放路徑/xxx/src/main/webapp/js/common.js 頁面存放地址:/xxx/src/main/webapp/WEB-INF/xxx/xxx/xxx/xxx
Android菜鳥學習筆記（WebView載入html頁面，頁面提交資料問題）
在開發過程中，有一個問卷調查功能，問卷是url用webView載入html頁面出來，在html頁面提交時發現session沒和webview的同步導致提交失敗，這個問題困擾了我很久，後來在前輩的共同研究下，終於找到辦法：獲取html頁面提交的url，然後對url做一次coo
初學html，任務1：一個簡單html頁面，要求：內容頁面裝一篇文章 用html來分段
enter pos 工程師 分享圖片 visit 技術 運行 並且 center 這是主要內容部分，用html實現版塊分布。 接下來是樣式部分。 讓頁面所有元素的padding和margin都設置為0 ； 否則加入一張大的覆蓋的背景圖片後，會由於瀏覽器的緣故，圖片周邊有
vue中使用v-html載入的富文字，css中定義樣式不生效
如題，使用v-html載入一段富文字，富文本里包含圖片，在手機上圖片寬度可能會溢位 <div v-html="htmlContent" class="rich"></div> <style scope> .rich>
html頁面，css引用外部字型
@font-face { font-family: 'Tw'; src: url('../fonts/Tw.eot'); src: url('../fonts/Tw.eot?#iefix') format('embedded-opentype'), url('.
winform窗體巢狀HTML頁面，開發出炫彩桌面程式
一：CEF全稱Chromium Embedded Framework，是一個基於Google Chromium 的開源專案。Google Chromium專案主要是為Google Chrome應用開發的，而CEF的目標則是為第三方應用提供可嵌入瀏覽器支援。 二：winform窗體巢狀HTML
靜態網頁輕鬆載入動態資料，讓HTML開發更輕鬆
很多人可能用過Vie.js，網頁動態載入資料。一般來說，HTML在後面呼叫new Vue()載入資料的。 Vue很有創意，在HTML中插入{{}}標記，使用HTML模板化，方便開發。但其也有一定不便。 我受Vue啟發，想與Jquery結合（我很喜歡JQuery）。 我嘗試使用$Ajax()載入資
有了html頁面，進行二次顯示，通過html、JavaScript、jQuery的ajax三種技術，我可以實現任何介面效果
當前j2ee的web工程開發， 最常用的前端顯示技術，有兩種：html、jsp。 場景： 以html為例，當用戶執行了某個操作，j2ee的web工程反饋了一個html頁面給使用者（其實不是這麼簡單，中間有渲染的過程，這裡略過，就當使用者得到了一個html頁面）。例如點選“新
Django自學之 將views.py中的資料傳遞到前端html頁面，並展示
自學Django已經有一週啦，想把自己自學過程中的每一步都記錄下來，給一些零基自學Django的戰友們一些參考；本次主要內容為，用一個例項展現views.py中的資料是如何傳遞到html頁面，並在頁面中展示。我的專案已經建立好，我的app為song03apptest。因為我的
HTML頁面，登陸驗證碼功能
$(function() { $('#mpanel').codeVerify({ type: 1, width: '80px', height: '27px',
js和安卓app互相傳資料（安卓app頁面整合html頁面，獲取資料並給安卓返回資料）
先上Demo：<!DOCTYPE html><html><head> <meta charset="utf-8"></head><body><button onclick="test()"&g
N秒鐘後自動跳轉的html頁面，javascript
最簡單的設定一下apache的首頁自動跳轉，簡單起見，直接編輯/var/www/html/index.html，填入一下內容，不用來回設定httpd.conf了就。 This page will take you to the Trac Home Page <span
控制使用jquery load()方法載入新頁面中的元素
三個參數 解決 獲取 參數 頁面 紮實 第一個 之前 簡單 最近在項目中用到jquery的load()方法來加載頁面，首先簡單說一下load()方法。 load(url,data,callback);該方法接收三個參數，第一個是載入的頁面地址，第二個是要傳到服務器的參數，第
[javascript]javascript取得html元素，取得html樣式，修改html樣式
一.取得html元素 詳情見：https://www.jb51.net/article/116460.htm 1.通過ID獲取（getElementById） document.getElementById('id') 2.通過name屬性（getElementsByName
如何輸出html原始碼，對html程式碼不進行解析
我們知道，瀏覽器會自動解析html程式碼，直接輸出解析後的效果。但有時我們希望輸出程式碼結構，並不想被解析，有辦法做到嗎？答案是肯定的，下面介紹下直接輸出原始碼的方法。 方法一：<xmp>標籤 把不需要被解析的html程式碼放入標籤<xmp><\xmp>
html頁面嵌入模板html模板
<iframe width="100%" height="225px" src="/search/frameDisplay_searchTop.action?mode=${param.mode }&dimension=${param.dimension}&pageI
gulp-html-import，在html中引入外部html檔案
寫於 2016.06.14 專案地址： gulp-html-import 曾經學習PHP的時候，深深覺得include語法非常好用，後接觸了ejs，發現裡面也有類似的語法，能夠方便地引入公共html檔案；在學習了vue，react等框架以後，“元件化思想”更是在我腦海根深蒂固，再也無
提交表單到servlet時出現空白頁面，但又不報錯
碰到問題時的部分問題程式碼如下： <form action="<%=request.getContextPath() %>/LoginServlet" onsubmit="return login();" method="post"> 我在裡面加了一段：
靜態屬性和靜態方法可以被繼承，但沒有被重寫（overwrite）而是被隱藏
靜態方法和屬性是屬於類的，呼叫的時候直接通過類名.方法名完成的，不需繼承機制就可以呼叫如果子類裡面定義了靜態方法和屬性，那麼這時候父類的靜態方法 或屬性稱之為“隱藏”，你如果想要呼叫父類的靜態方法和屬性，直接通過父類名.方法名或變數名完成，至於是否繼承一說，子類是有繼承靜