2016-03-03 26 views
2

我正在一個網站上工作,每20個頁面每隔幾個月就會更改一次。我決定製作一個腳本來加載導航欄,導航和頁腳,就像它們在每個頁面上一樣。在一頁上顯示多個javascript

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
<link href="../css/bootstrap-dropdownhover.min.css" rel="stylesheet"> 
<link rel="stylesheet" type="text/css" href="../css/myCss.css"> 
</head> 
<body> 

<navbar></navbar> 

<div id="nav"></div> 

<div class="content"></div> 

<footer></footer> 

</body> 
<script src="../js/loader.js"></script> 
<script src="../js/bootstrap-dropdownhover.min.js"></script> 
</html> 

我使用loader.js加載導航欄,導航和頁腳。

$(document).ready(function() { 
    $("navbar").load("../pageFramework/navbar.html"); 
}); 

$(document).ready(function() { 
    $("#nav").load("../pageFramework/navpills.html"); 
}); 

$(document).ready(function() { 
    $("footer").load("../pageFramework/footer.html"); 
}); 

這會將所有頁面完美,但是當我嘗試要弄清我的資產淨值的dropdownhover.min.js不起作用顯示我的下拉菜單。當我將navbar html直接放在頁面上並刪除loader.js時,它可以很好地工作。

+0

問題出在'bootstrap-dropdownhover.min.js'。這聽起來像只適用於靜態元素,而不是動態添加元素。 – Barmar

+0

@cale_b如果事件綁定位於第三方庫中,這並沒有多大幫助。 – Barmar

+1

你應該看看通過使用包含來做這個服務器端。使用這種方法意味着你有效地翻兩倍加載頁面的請求數量(CSS和圖像除外) –

回答

相關問題