一页上有多个javascript答案

【问题标题】：Multiple javascripts on one page一页上有多个javascript
【发布时间】：2016-06-17 11:37:56
【问题描述】：

我正在开发一个包含 20 多个页面的网站，这些页面每隔几个月就会更改一次。我决定编写一个脚本来加载每个页面上的导航栏、导航和页脚。

<!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 无法显示我的下拉菜单。当我将导航栏 html 直接放在页面上并删除 loader.js 时，它可以完美运行。

【问题讨论】：

问题出在bootstrap-dropdownhover.min.js。听起来它只适用于静态元素，而不适用于动态添加的元素。
@cale_b 如果事件绑定在第三方库中，这并没有多大帮助。
你真的应该考虑通过使用包含来做这个服务器端。使用此方法意味着您有效地将加载页面的请求数量翻了两番（CSS 和图像除外）
@RoryMcCrossan 这听起来是个好主意。我是 JS 新手，所以我认为这会起作用，但包括在内。
你的代码只是一个例子吗？因为我认为不需要 3 个 $(document).ready(...) 语句。你能把这些合二为一吗？那么使用下面答案中列出的回调方法会更容易

标签： javascript jquery html css

【解决方案1】：

加载页眉/导航/页脚后，您需要重新初始化引导程序；见Bootstrap Select - reinitialize on dynamically added element

【讨论】：

【解决方案2】：

需要在load(navbar.html)的回调中加载bootstrap-dropdownhover.min.js。见：https://api.jquery.com/jquery.getscript/

【讨论】：