带有引导程序的 jquery 脚本顺序答案

【问题标题】：script order for jquery with bootstrap带有引导程序的 jquery 脚本顺序
【发布时间】：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

【问题讨论】：

标签： javascript jquery html jquery-ui twitter-bootstrap

【解决方案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

【讨论】：