带有引导程序的 jquery 的脚本顺序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16926086/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
script order for jquery with bootstrap
提问by bcoop713
I'm new to jquery and bootstrap, and I can't get them to play nicely with each other. I have a page with both bootstrap dropdowns and jquery sliders. However, I can't get both of them to work at the same time.
我是 jquery 和 bootstrap 的新手，我无法让它们很好地相互配合。我有一个包含引导程序下拉菜单和 jquery 滑块的页面。但是，我不能让他们同时工作。
Bootstrap dropdowns work with this file, and sliders break
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
By removing the second to last line like so:
通过像这样删除倒数第二行：
Sliders work, and bootstrap dropdowns break
滑块工作，引导下拉菜单中断
<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
回答by Tobias Hagenbeek
oh yeah now i see sorry. You have to load your actual jquery first, else UI won't work either. So this should be the head
哦，是的，现在我很抱歉。你必须先加载你的实际 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">
Also in html5 you need to leave off the 'type="text/javascript"', like the bootstrap one, also be consisten, so if you have it on the other, also add it to the bootstrap, it has to do with loading rules.
同样在 html5 中，你需要去掉 'type="text/javascript"'，就像引导程序一样，也是一致的，所以如果你在另一个上有它，也把它添加到引导程序中，它与加载有关规则。
回答by Tobias Hagenbeek
Not sure, but it seems like your Bootstrap version requires a newer version of jQuery to run properly, try to replace:
不确定，但似乎您的 Bootstrap 版本需要较新版本的 jQuery 才能正常运行，请尝试替换：
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
with
和
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
and then leaving it off in your body.
然后把它留在你的身体里。
Let me know what happens then.
让我知道接下来会发生什么。
Note:Don't ever loadtwo jQuerys, they will break and stop the working of your functions, and especially when you use ajax on your page.
注意：永远不要加载两个 jQuery，它们会破坏并停止您的函数的工作，尤其是当您在页面上使用 ajax 时。
回答by Tyson Gibby
"jQuery must come first, then Popper.js, and then our [bootstrap] JavaScript plugins." Bootstrap 4.x javascript script order: getbootstrap.com
“必须先使用 jQuery，然后是 Popper.js，然后是我们的 [bootstrap] JavaScript 插件。” Bootstrap 4.x javascript 脚本顺序：getbootstrap.com
