logo标签列表

jQuery未定义Twitter Bootstrap。

javascriptjqueryhtmlcsstwitter-bootstrap
18

我遇到一个错误，提示jQuery未定义。我想使用Twitter Bootstrap和jQuery-UI。在我的<head>标签中，我已经添加了必要的CSS和JS。我注意到jQuery-UI页面使用的是1.9.1版本的jQuery，而最新版本是1.10.2。因此，我认为可能存在某种冲突。Twitter Bootstrap需要jQuery，因此可能会导致该错误。或者我可能做错了什么。

头部：

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

错误：

Uncaught ReferenceError: jQuery is not defined          bootstrap.min.js:6
(anonymous function)                                    bootstrap.min.js:6

在此输入图片描述

7
Jquery 需要在 Bootstrap 之前列出。 - todd.pund
2
你为什么要包含两个版本的jQuery？ - j08691
@j08691 好的，jQuery UI 网站链接使用了那个版本，我查阅了一些关于 JS 向后兼容性的信息。我了解到它是好的，但有时可能会出现错误，所以我两个都包含了。 - Liondancer
4个回答
48

在所有其他内容之前加载jQuery！

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
7
在加载JS之前，请始终先加载CSS。 - Popnoodles
1
理想情况下，你应该在 HTML 结束标签 </body> 前加载 JavaScript - 直到此时它才被使用，这样可以加速页面加载。 - Popnoodles
6
对我来说不起作用。我先引入了jQuery再引入Bootstrap，但仍然出现错误！ - Green
2
为什么你要多次调用jQuery？能否请你解释一下？ - Amit Bera
@tymeJV - 非常感谢！ :D - drzounds
5
这很可能是由于以下两个原因之一引起的：
  1. 您正在加载两次jQuery，请删除其中一个（最好是旧版本）。
  2. 在加载jQuery之前先加载了bootstrap.min.js（请阅读文档here）。
你需要做的是：
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" />
1
似乎我的问题是在加载jQuery之前加载了bootstrap.min.js。干杯。 - Icementhols
4
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

在Bootstrap之前添加jQuery js文件。
4

我已经测试过，这个顺序似乎是最好的。

  1. 加载CSS
  2. 加载jQuery
  3. 加载Bootstrap
  4. 加载jQuery UI
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接