2016-03-03 27 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和图像除外) –

回答

相关问题