发表新帖
发表新帖

Bootstrap's JavaScript requires jQuery While jQuery is already loaded

前端 未结
关注
4 738
终归单人心
终归单人心 2021-01-18 00:01

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

Uncaught Error: Bootstrap\'s JavaScript requires j

相关标签:
4条回答
  • 礼貌的吻别
    2021-01-18 00:42

    you have a missing ")}" in your "main" function. after correcting this, bootstrap loads successfully for me without giving any error. I'm using 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>

    0 讨论(0)
  • 温柔的废话
    2021-01-18 00:45

    Why make it so complicated?

    Just add this inside your <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.

    0 讨论(0)
  • 深忆病人
    2021-01-18 00:47

    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
    0 讨论(0)
  • 滥情空心
    2021-01-18 00:50

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题