带有引导程序的 jquery 脚本顺序
Posted
技术标签:
【中文标题】带有引导程序的 jquery 脚本顺序【英文标题】：script order for jquery with bootstrap 【发布时间】：2013-05-31 08:04:06 【问题描述】：我是 jquery 和 bootstrap 的新手，我无法让它们相互配合。我有一个包含引导下拉菜单和 jquery 滑块的页面。但是，我不能让他们两个同时工作。
Bootstrap 下拉菜单可用于此文件，并且滑块会损坏
<html lang="en">
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="/js/slider_input.js"></script>
</head>
<body>
....
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</body
</html
通过像这样删除倒数第二行：
滑块工作，引导下拉菜单中断
<html lang="en">
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="/js/slider_input.js"></script>
</head>
<body>
....
<script src="/bootstrap/js/bootstrap.min.js"></script>
</body
</html
【问题讨论】：
【参考方案1】：哦，是的，现在我明白了。您必须先加载实际的 jquery，否则 UI 也将无法工作。所以这应该是头
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/js/slider_input.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
同样在 html5 中你需要去掉 'type="text/javascript"'，就像 bootstrap 一样，也是一致的，所以如果你有它，也将它添加到 bootstrap，它必须做加载规则。
【讨论】：
【参考方案2】：不确定，但您的 Bootstrap 版本似乎需要更新版本的 jQuery 才能正常运行，请尝试替换：
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
与
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
然后把它留在你的身体里。
让我知道接下来会发生什么。
注意：永远不要加载两个 jQuery，它们会破坏和停止你的函数的工作，尤其是当你在页面上使用 ajax 时。 p>
【讨论】：
其中一个用于 jqueryui，一个来自 jquery，我不需要两者吗？ 试过了，还是坏了:( 哦，是的，现在我明白了。您必须先加载实际的 jquery，否则 UI 也将无法工作。所以这应该是头部 【参考方案3】："jQuery 必须是第一位的， 然后是 Popper.js，然后是我们的 [bootstrap] JavaScript 插件。” Bootstrap 4.x javascript script order: getbootstrap.com
【讨论】：
以上是关于带有引导程序的 jquery 脚本顺序的主要内容，如果未能解决你的问题，请参考以下文章
如何使用引导程序，jquery为选项卡制作上一个和下一个按钮？
无论我使用哪种顺序，Rails 5 中的引导/jQuery 加载顺序都会中断