Bootstrap的JavaScript需要jQuery jQuery已经加载 [英] Bootstrap's JavaScript requires jQuery While jQuery is already loaded

问题描述

我在加载 Bootstrap 库时遇到了一个错误，因为它总是出现此错误：

未捕获错误：Bootstrap的JavaScript需要jQuery

尽管我附加了 Bootstrap 库确保 jQuery 已加载，但仍然收到错误。

I使用以下代码通过创建该元素并将它附加到文档中，从而将 jQuery 附加到页面：

  / ********如果不存在，请加载jQuery ********* / 
 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）; 
 
 
 //尝试查找头部，否则默认为documentElement 
（document.getElementsByTagName（head）[0] || document.documentElement）.appendChild script_tag）; 
 
 
 if（script_tag.readyState）{
 script_tag.onreadystatechange = function（）{//对于旧版本的IE 
 if（this.readyState =='完成'|| this.readyState =='loaded'）{
 console.log（window.jQuery.fn.jquery）; 
 scriptLoadHandler（）; 
} 
}; 
} else {
 console.log（ONLOAD STATE）; 
 script_tag.onload = scriptLoadHandler; 
} 
} else {
 //窗口上的jQuery版本是我们想要使用的版本
 jQuery = window.jQuery; 
 main（）; 
 
 
函数scriptLoadHandler（）{
 //将$和$ window.jQuery恢复到以前的值并将
 //新的jQuery存储在我们的本地jQuery变量中
 jQuery = window.jQuery.noConflict（true）; 
 //调用我们的主函数
 main（）; 
} 
  

在这里我创建 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）; 
}）
} 
  

为了澄清一件重要的事情
我写了 js 代码放在一个单独的 js 文件中，因为我想稍后用作 jQuery插件。因此，我试图附加这些库，因为我不能保证目标页面将包含这些库或不包含这些库。

解决方案

尝试使用https加载jquery

  script_tag.setAttribute（src，
https：// ajax。 googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js）; 
  

希望它能正常工作。

I'm facing an error with loading the Bootstrap library as it always gives this error:

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.

I'm using the following code to attach the jQuery to the page by creating the element and append it to the 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:

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. Thus, I'm trying to attach the libraries as I don't guarantee that the targeted page would include those libraries or not

解决方案

Try to load jquery using https

script_tag.setAttribute("src",
        "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js");

Hope it'll work.

这篇关于Bootstrap的JavaScript需要jQuery jQuery已经加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！