Bootstrap zgłasza Uncaught Error: JavaScript Bootstrap wymaga jQuery [zamknięty]

172

Próbuję użyć Bootstrap, aby utworzyć interfejs dla programu. Dodałem jQuery 1.11.0 do <head>tagu i pomyślałem, że to tyle, ale kiedy uruchamiam stronę internetową w przeglądarce jQuery zgłasza błąd:

Uncaught Error: Bootstrap's JavaScript requires jQuery

Próbowałem używać jQuery 1.9.0, próbowałem z kopiami hostowanymi w kilku sieciach CDN, ale nie mogę sprawić, by działało. Czy ktoś może wskazać, co robię źle?

— Munim Munna
źródło

28

Uwzględnij jQuery przed Bootstrap ...

— Adriano Repetti

W moim przypadku zainstalowałem jquery przed bootstrapem i wszystko działało dobrze. Samo dołączenie przed bootstrapem nie rozwiązało błędu.

— Stuti Verma

W moim przypadku, zamiast dodawać jquery w stopce (jak w szablonie bootstrap); Dodałem to w nagłówku. Rozwiązać problem.

— Adeel Raza Azeemi

1

po prostu dodaj

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>

przed skryptem importu bootstrap. Skopiuj najnowszy CDN tutaj: cdnjs.com/libraries/jquery

— Tina Lee

373

Spróbuj tego

Zmień kolejność plików, tak jak poniżej ..

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>

— Sridhar R
źródło

85

Nie działa na mnie. Mam jQuery przed Bootstrapem i mimo to otrzymuję błąd!

— Green

2

działał, ale uzyskał poziomy pasek przewijania na dole

— HimalayanCoder

1

Jeśli to nie działa z tego… może być tak, że jQuery zostało zainstalowane przez Bower, więc być może będziesz musiał zajrzeć do bower_components / jquery / dist / jquery.js .. część „dist” jest tym, co przeoczyłem.

— Jax Cavalera

Pracował dla mnie przy projekcie Django-Oscar. Ten błąd zaczyna się pojawiać nieoczekiwanie. Przypuszczam, że majstrowanie przy zupełnie niepowiązanym kodzie może zmienić kolejność renderowania i wywołać ten błąd.

— MadPhysicist

najwyraźniej nie zauważyłem, że dwukrotnie włączyłem plik bootstrap.js - za pierwszym razem było to na długo przed zapytaniem

— JJ Roman

91

Jeśli pracujesz w środowisku obsługującym tylko przeglądarkę , użyj rozwiązania SridharR .

Jeśli pracujesz w środowisku Node / CommonJS + Browser (np. Electron, node-webkit itp.); przyczyną tego błędu jest to, że logika eksportu jQuery najpierw sprawdza module, a nie window:

if (typeof module === "object" && typeof module.exports === "object") {
    // CommonJS/Node
} else {
    // window
}

Zauważ, że module.exportsw tym przypadku eksportuje się przez ; więc jQueryi $nie są przypisane do window.

Aby rozwiązać ten problem, zamiast <script src="path/to/jquery.js"></script>;

Po prostu przypisz to samemu requirestwierdzeniem:

<script>
    window.jQuery = window.$ = require('jquery');
</script>

UWAGA: Jeśli Twoja aplikacja electron nie potrzebuje nodeIntegration, ustaw ją na, falseaby nie było potrzeby tego obejścia.

— Onur Yıldırım
źródło

3

window.jQuery = window.$ = require('jquery');to zadziałało dla mnie przy próbie złożenia brunchowej kompilacji z jQuery 2 i Bootstrap 3. Jednak znalezienie odpowiedzi zajęło mi tylko kilka godzin :(. Czy to wymaganie zmienia się w późniejszych wersjach jQuery?

— rikkit

1

Nie wiem, ale ponieważ to nie jest błąd, nie sądzę. Jeśli Twoja aplikacja Electron nie potrzebuje nodeIntegration, ustaw ją na, falseaby nie było potrzeby tego obejścia.

— Onur Yıldırım

1

Musisz zainstalować jquery używając npm install jquerynot with bower.

— syodage

1

Przydatne, aby zobaczyć, jak elektron

— radzi sobie

Nadal tego nie rozumiem, ale Laravel stosuje to samo podejście: github.com/laravel/laravel/blob/v5.7.0/resources/js/ ...

— Ryan

14

powinieneś najpierw załadować jquery, ponieważ bootstrap używa funkcji jquery. lubię to:

<!doctype html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" src="css/animate.css">
        <link type="text/css" rel="stylesheet" src="css/bootstrap-theme.min.css">
        <link type="text/css" rel="stylesheet" src="css/bootstrap.min.css">
        <link type="text/css" rel="stylesheet" href="css/custom.css">

<!--   Shuffle your scripts HERE  -->
        <script src="js/jquery-1.11.0.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/wow.min.js"></script>
<!--   End  -->   

        <title>pyMeLy Interface</title>
    </head>
    <body>
        <p class="title1"><strong>pyMeLy</strong></p>
        <p class="title2"><em> A stylish way to view your media</em></p>
        <div style="text-align:center;">
            <button type="button" class="btn btn-primary">Movies</button>
            <button type="button" class="btn btn-primary btn-lg">Large button</button>
        </div>
    </body>
</html>

— 124
źródło

7

Musisz dodać JQuery przed dodaniem bootstrapa-

<!-- JQuery Core JavaScript -->
<script src="lib/js/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="lib/js/bootstrap.min.js"></script>

— Vivek Panday
źródło

4

Podałeś złą kolejność dla JAVASCRIPT i BOOTSTRAP

zgodnie z konwencją bootstrap musi być zgodny z definicją pliku jquery

<!-- JQuery Core JavaScript -->
<script src="lib/js/jquery.min.js"></script>
<script src="lib/js/jquery-ui.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="lib/js/bootstrap.min.js"></script>

— Mohit Singh
źródło

1

W moim przypadku rozwiązanie jest naprawdę głupie i dziwne.

Poniższy kod został wstępnie wypełniony przez plik _Layout.cshtml. (NIE napisane przeze mnie)

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

Ale kiedy zweryfikowałem w folderze Scripts, jquery-1.10.2.min.js nie był nawet dostępny. W związku z tym zastąpiono kod jak poniżej, gdzie jquery-1.9.1.min.js jest istniejącym plikiem:

<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

— Ashok kumar
źródło

1

Używam NodeJS i mam ten sam błąd. Podobnie jak w przypadku innych odpowiedzi, problem polegał również na tym, że JQuery musiało zostać załadowane przed Bootstrapem; jednak ze względu na charakterystykę NodeJS ta zmiana musiała zostać zastosowana w pliku pipeline.js .

Zmiana w pliku pipeline.js wyglądała następująco:

var jsFilesToInject = [
  // Dependencies like jQuery, or Angular are brought in here
  'js/dependencies/angular.1.3.js',
  'js/dependencies/jquery.js',
  'js/dependencies/bootstrap.js',
  'js/dependencies/**/*.js',
];

Używam również pomruka do pomocy, co automatycznie zmieniło kolejność na głównej stronie html:

<!--SCRIPTS-->
  <script src="/js/dependencies/angular.1.3.js"></script>
  <script src="/js/dependencies/jquery.js"></script>
  <script src="/js/dependencies/bootstrap.js"></script>
  <!-- other dependencies -->
<!--SCRIPTS END-->

Mam nadzieję, że to pomoże! Nie powiedziałeś, jakie jest Twoje środowisko, więc zdecydowałem się opublikować tę odpowiedź.

— Ernani
źródło

1

Jeśli używasz, require.jsmusisz dodać window.$ = window.jQuery = require('jquery')plik app.js

LUB możesz ustawić zależne ładowanie pliku po załadowaniu pliku nadrzędnego ... tak jak poniżej

require.config({
    baseUrl: "scripts/appScript",
    paths: {
        'jquery':'jQuery/jquery.min',
        'bootstrap':'bootstrap/bootstrap.min' 
    },
   shim
    shim: {
        'bootstrap':['jquery'],
        },

    // kick start application
    deps: ['app']
});

Powyższy kod pokazał, że bootstrapjest zależny od, Jquerywięc dodałem shimi uzależniłem go

— SantoshK
źródło

0

Jeśli kod wygląda dobrze, sprawdź, czy jQuery pomyślnie załadowano na serwer. W moim przypadku pliki jQuery zostały opublikowane na serwerze przez moje IDE, ale serwer WWW miał tylko plik pośredniczący o rozmiarze 0 KB. W przypadku braku treści serwer nie mógł udostępnić pliku przeglądarce.

Po ponownym opublikowaniu pliku i sprawdzeniu, czy serwer faktycznie otrzymał cały plik, moja strona przestała pokazywać mi błąd.

— Zarepheth
źródło

0

Musisz dodać JQuery js przed dodaniem pliku bootstrap js, ponieważ BootStrap używa funkcji jqueries. Więc upewnij się, że najpierw załadowałeś plik jquery js, a następnie plik js bootstap.

<!-- JQuery Core JavaScript -->
<script src="app/js/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="app/js/bootstrap.min.js"></script>

— Jani Devang
źródło

0

Jeśli tak się dzieje, dotyczy tylko intranetu IE, sprawdź ustawienia zgodności i usuń zaznaczenie opcji „Wyświetlaj witryny intranetowe w trybie zgodności”.

IE -> ustawienia -> zgodność

— Davut Gürbüz
źródło

0

W oficjalnych dokumentach: https://electronjs.org/docs/faq#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron

<head>
  <script>
  window.nodeRequire = require;
  delete window.require;
  delete window.exports;
  delete window.module;
  </script>
  <script type="text/javascript" src="jquery.js"></script>
</head>

— Fabio Souza
źródło

1

Naprawiłem to na angular.json za pomocą kodu "" scripts ": [" node_modules / jquery / dist / jquery.min.js "," node_modules / bootstrap / dist / js / bootstrap.min.js "]"

— AntWo

0

Wypróbowałem prawie wszystkie powyższe metody.

Wreszcie naprawiono to, dołączając

script src="{%static 'App/js/jquery.js' %}"

zaraz po załadowaniu plików statycznych, np. {% load staticfiles %}w base.html

— kanika
źródło

0

Po walce z tym problemem podjąłem trzy kroki:

Użyj wersji jQuery w dowolnym miejscu między 1.9.0 a 3.0.0
Zadeklaruj plik jQuery przed zadeklarowaniem pliku Bootstrap
Zadeklaruj te dwa pliki skryptów na dole <body></body>tagów, a nie w <head></head>. Te działały dla mnie, ale mogą występować różne zachowania w zależności od używanej przeglądarki.

— Karisno1
źródło