Bootstrap的JavaScript需要jQuery而jQuery已经加载了
[英]Bootstrap's JavaScript requires jQuery While jQuery is already loaded
问题描述
I'm facing an error with loading the Bootstrap library as it always gives this error: 
我在加载Bootstrap库时遇到错误，因为它始终会出现此错误：
Uncaught Error: Bootstrap's JavaScript requires jQuery
Despite that I'm attaching the Bootstrap library after making sure the jQuery is loaded but still getting the error. 尽管我在确保加载jQuery但仍然收到错误后附加了Bootstrap库。
I'm using the following code to attach the jQuery to the page by creating the element and append it to the document : 我正在使用以下代码通过创建元素将jQuery附加到页面并将其附加到document ：
/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '3.1.1') {
console.log("jQuery LOADED");
var script_tag = document.createElement('script');
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("src",
"http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js");
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
if (script_tag.readyState) {
script_tag.onreadystatechange = function () { // For old versions of IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
console.log(window.jQuery.fn.jquery);
scriptLoadHandler();
}
};
} else {
console.log("ONLOAD STATE");
script_tag.onload = scriptLoadHandler;
}
} else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
main();
}
function scriptLoadHandler() {
// Restore $ and window.jQuery to their previous values and store the
// new jQuery in our local jQuery variable
jQuery = window.jQuery.noConflict(true);
// Call our main function
main();
}
Here I'm creating the Bootstrap after document is being ready: 在这里，我在document准备好后创建Bootstrap ：
function main() {
jQuery(document).ready(function ($) {
var bootstrap_script = document.createElement('script');
bootstrap_script.setAttribute("type", "text/javascript");
bootstrap_script.setAttribute("src",
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js");
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(bootstrap_script);
})
}
Just to clarify a critical thing I'm writing the js code in a separated js file, because I want to use later as a jQuery plugin . 只是为了澄清一个关键的事情，我在一个单独的js文件中编写js代码，因为我想稍后用作jQuery plugin 。 Thus, I'm trying to attach the libraries as I don't guarantee that the targeted page would include those libraries or not 因此，我正在尝试附加库，因为我不保证目标页面是否包含这些库
4 个解决方案
解决方案1
4 2016-12-26 10:05:52
you have a missing ")}" in your "main" function. 你的“主”功能中缺少“）}”。 after correcting this, bootstrap loads successfully for me without giving any error. 在纠正之后，bootstrap成功加载给我而没有给出任何错误。 I'm using firefox 50.1.0 我正在使用firefox 50.1.0
here is your code that works for me: 这是你的代码对我有用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>document</title> </head> <body> <script> /******** Load jQuery if not present *********/ if (window.jQuery === undefined || window.jQuery.fn.jquery !== '3.1.1') { console.log("jQuery LOADED"); var script_tag = document.createElement('script'); script_tag.setAttribute("type", "text/javascript"); script_tag.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"); // Try to find the head, otherwise default to the documentElement (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); if (script_tag.readyState) { script_tag.onreadystatechange = function () { // For old versions of IE if (this.readyState == 'complete' || this.readyState == 'loaded') { console.log(window.jQuery.fn.jquery); scriptLoadHandler(); } }; } else { console.log("ONLOAD STATE"); script_tag.onload = scriptLoadHandler; } } else { // The jQuery version on the window is the one we want to use jQuery = window.jQuery; main(); } function scriptLoadHandler() { // Restore $ and window.jQuery to their previous values and store the // new jQuery in our local jQuery variable jQuery = window.jQuery.noConflict(true); // Call our main function main(); } function main() { jQuery(document).ready(function ($) { var bootstrap_script = document.createElement('script'); bootstrap_script.setAttribute("type", "text/javascript"); bootstrap_script.setAttribute("src", "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"); (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(bootstrap_script); }) } </script> </body> </html>
解决方案2
1 2016-12-26 09:38:45
The problem is that you are using a higher version. 问题是您使用的是更高版本。 Use this version: 使用此版本：
http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
解决方案3
1 已采纳 2016-12-26 11:11:38
Try to load jquery using https 尝试使用https加载jquery
script_tag.setAttribute("src",
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js");
Hope it'll work. 希望它能奏效。
解决方案4
0 2016-12-26 10:31:00
Why make it so complicated? 为什么要这么复杂？
Just add this inside your <head> 只需在<head>添加它即可
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" ></script>
Or add it last in your document to enable a faster load. 或者在文档中最后添加它以加快加载速度。 You then need to use document ready on your scripts so they don't run before the jQuery has been loaded. 然后，您需要在脚本上使用document ready，这样它们就不会在加载jQuery之前运行。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.