Bootstrap требует JQuery Хотя Jquery уже загружен

я столкнулся ошибка с загрузкой Bootstrap библиотеки, как это всегда дает эту ошибку:Bootstrap требует JQuery Хотя Jquery уже загружен

Uncaught Error: Bootstrap's JavaScript requires jQuery

Несмотря на то что я крепление Bootstrap библиотеки после убедившись, jQuery загружен, но все еще получает ошибку.

Я использую следующий код, чтобы прикрепить 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(); 
}

Здесь Я создаю Bootstrap после document в готовности:

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. Таким образом, я пытаюсь прикрепить библиотеки, поскольку я не гарантирую, что целевая страница будет включать эти библиотеки или нет.

источник

2016-12-26 Ali Alhamaly

«JavaScript для Bootstrap требует jQuery версии 1.9.1 или новее, но ниже версии 4», но похоже, что это не проблема с jquery-версией, которая помещает ваш jquery перед этой функцией, если еще не выполнен. – Curiousdev

@Curiousdev Я уже поставил jQuery перед этой функцией –

Попробуйте загрузить JQuery с использованием протокола HTTPS

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

надеюсь, что он будет работать.

источник

2016-12-26 11:11:38 Curiousdev

Проблема в том, что вы используете более высокую версию. Используйте эту версию:

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

источник

2016-12-26 09:38:45 ab29007

более низкая версия jquery решит проблему –

Bootstrap v3.3.7 "dependencies": {"jquery": "1.9.1 - 3"} –

Спасибо, но все равно получаю ту же ошибку! –

у вас отсутствует ")}" в вашей "основной" функции. после исправления этого, загрузочная загрузка загружается для меня без каких-либо ошибок. Я использую 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>

источник

2016-12-26 10:05:52

Спасибо, дорогая, на самом деле это была моя ошибка при копировании кода из моего проекта как "})" уже есть, так или иначе я отредактировал свой вопрос –

Я доволен что мой ответ решает вашу проблему –

Дорогой, моя ошибка еще не решена, по-прежнему сталкивается с той же проблемой, я добавил отсутствующий «)) в свой код, но это не было причиной моей проблемы. –

Почему делают это так сложно?

Просто добавьте это в вашей <head>

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

Или добавить его в последний раз в документе, чтобы позволить более быструю загрузку. Затем вам нужно использовать документ, готовый к вашим скриптам, чтобы они не запускались до загрузки jQuery.

источник

2016-12-26 10:31:00 TheCrazyProfessor

Я разрабатываю плагин jQuery, который будет использоваться другими, поэтому я не гарантирую, что загрузочная библиотека или библиотека jquery загружаются на целевую страницу, поэтому я пытаюсь их подключить, используя JavaScript –

И как Я понимаю, что моя проблема не в том, где следует помещать библиотеку начальной загрузки в документ, моя проблема в том, что он не видит jquery, пока я помещаю его внутри документа docment.ready, который гарантирует полную загрузку библиотеки jquery. –

Ну, это проводной. Вы пытаетесь сделать console.log в своем коде, чтобы вы могли видеть, когда прогресс начнет срываться? – TheCrazyProfessor

Bootstrap требует JQuery Хотя Jquery уже загружен

ответ

Смежные вопросы