Bootstrap 的 JavaScript 需要 jQuery 而 jQuery 已经加载答案

【问题标题】：Bootstrap's JavaScript requires jQuery While jQuery is already loadedBootstrap 的 JavaScript 需要 jQuery 而 jQuery 已经加载
【发布时间】：2017-05-10 19:02:10
【问题描述】：

我在加载 Bootstrap 库时遇到错误，因为它总是给出这个错误：

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

尽管我在确保 jQuery 已加载但仍然出现错误后附加了 Bootstrap 库。

我正在使用以下代码通过创建元素将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();
}

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

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

【问题讨论】：

"Bootstrap 的 JavaScript 需要 jQuery 版本 1.9.1 或更高版本，但低于版本 4" 但似乎这不是 jquery 版本的问题，如果尚未完成，请将您的 jquery 放在此函数之前
@Curiousdev 我已经把jQuery放在这个函数之前了

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

问题是您使用的是更高版本。使用这个版本：

http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

【讨论】：

Bootstrap v3.3.7 "依赖": { "jquery": "1.9.1 - 3"}
你在两个地方都把3.1.1改成2.1.1了吗
你知道在if 和同时设置src
是的，我在两个地方都改了
我认为这不是上述问题的解决方案。在回答任何问题@AnujaAgarwal之前，请确保它正常工作

【解决方案2】：

您的“main”函数中缺少“)}”。更正此问题后，引导程序为我成功加载，没有给出任何错误。我正在使用 Firefox 50.1.0

你的代码对我有用：

<!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>

【讨论】：

谢谢亲爱的，实际上这是我从我的项目中复制代码的错误，因为“})”已经存在，无论如何我已经编辑了我的问题
很高兴听到我的回答解决了您的问题
亲爱的我的错误还没有解决，仍然面临同样的问题，我已将缺少的“})”添加到我的代码中，但这不是我的问题的原因
尝试将代码原样复制并粘贴到 sn-p 中。它适用于我，如果它适用于您，您可以轻松识别错误。
是主函数和jQuery的测试在同一个文件还是在两个单独的文件中？

【解决方案3】：

为什么要这么复杂？

只需将其添加到您的<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" ></script>

或将其添加到文档的最后以加快加载速度。然后，您需要在脚本上使用准备好的文档，以便在加载 jQuery 之前它们不会运行。

【讨论】：

我正在开发一个将被其他人使用的 jQuery 插件，因此我不保证引导库和 jquery 库都加载到目标页面中，这就是我尝试的原因使用 JavaScript 附加它们
据我所知，我的问题不是应该将引导库放在文档中的哪个位置，我的问题是当我将它放入 docment.ready 时它看不到 jquery jquery库的完整加载
那是有线的。您是否尝试在代码中添加 console.log，以便查看进度何时开始失败？

【解决方案4】：

尝试使用 https 加载 jquery

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

希望它会起作用。

【讨论】：