可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I am getting this error that says jQuery is not defined. I want to use twitter bootstrap and jQuery-UI. In my <head> I've added the CSS and JS necessary. I noticed that the jQuery-UI page uses 1.9.1 jQuery and the latest version is 1.10.2. So I'm assuming there is some sort of conflict going on. Twitter bootstrap requires jQuery so that might be causing the error. Or perhaps I am doing something wrong.
Head:
<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>
Error:
Uncaught ReferenceError: jQuery is not defined bootstrap.min.js:6 (anonymous function) bootstrap.min.js:6
回答1:
Load jQuery before everything else!
<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>
回答2:
This is most likely because of 2 reasons:
- You are loading jQuery twice; remove one of them (preferably the older version).
- You are loading bootstrap.min.js before loading jQuery (read the documentation here).
What you need to do is:
<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" />
回答3:
<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>
add jquery js file above bootstrap
回答4:
I've tested this and this order seems to work the best.
- Load CSS
- Load jQuery
- Load Bootstrap
- Load jQuery UI
