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

问题描述

我在加载Bootstrap库时遇到错误，因为它总是会出现此错误:

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

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

Uncaught Error: Bootstrap's JavaScript requires jQuery

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

Despite that I'm attaching the Bootstrap library after making sure the jQuery is loaded but still getting the error.

我正在使用以下代码，通过创建元素并将jQuery附加到页面并将其附加到document:

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();
}

在准备好document之后，我在这里创建Bootstrap:

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);
    })
}

只是澄清一个关键的事情 我将js代码写在单独的js文件中，因为我想以后用作jQuery plugin.因此，我尝试附加库，因为我不保证目标页面是否包含这些库

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

推荐答案

尝试使用https加载jquery

Try to load jquery using https

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

希望它会起作用.

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