我正在一个网站上工作,每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时,它可以很好地工作。
问题出在'bootstrap-dropdownhover.min.js'。这听起来像只适用于静态元素,而不是动态添加元素。 – Barmar
@cale_b如果事件绑定位于第三方库中,这并没有多大帮助。 – Barmar
你应该看看通过使用包含来做这个服务器端。使用这种方法意味着你有效地翻两倍加载页面的请求数量(CSS和图像除外) –