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?
jquery
html
css
twitter-bootstrap
twitter-bootstrap-3
Munim Munna
źródło
źródło
<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/jqueryOdpowiedzi:
Spróbuj tego
Zmień kolejność plików, tak jak poniżej ..
źródło
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 niewindow
:Zauważ, że
module.exports
w tym przypadku eksportuje się przez ; więcjQuery
i$
nie są przypisane dowindow
.Aby rozwiązać ten problem, zamiast
<script src="path/to/jquery.js"></script>
;Po prostu przypisz to samemu
require
stwierdzeniem:UWAGA: Jeśli Twoja aplikacja electron nie potrzebuje
nodeIntegration
, ustaw ją na,false
aby nie było potrzeby tego obejścia.źródło
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?nodeIntegration
, ustaw ją na,false
aby nie było potrzeby tego obejścia.npm install jquery
not with bower.powinieneś najpierw załadować jquery, ponieważ bootstrap używa funkcji jquery. lubię to:
źródło
Musisz dodać JQuery przed dodaniem bootstrapa-
źródło
Podałeś złą kolejność dla JAVASCRIPT i BOOTSTRAP
zgodnie z konwencją bootstrap musi być zgodny z definicją pliku jquery
źródło
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)
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:
źródło
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:
Używam również pomruka do pomocy, co automatycznie zmieniło kolejność na głównej stronie html:
Mam nadzieję, że to pomoże! Nie powiedziałeś, jakie jest Twoje środowisko, więc zdecydowałem się opublikować tę odpowiedź.
źródło
Jeśli używasz,
require.js
musisz dodaćwindow.$ = window.jQuery = require('jquery')
plik app.jsLUB możesz ustawić zależne ładowanie pliku po załadowaniu pliku nadrzędnego ... tak jak poniżej
Powyższy kod pokazał, że
bootstrap
jest zależny od,Jquery
więc dodałemshim
i uzależniłem goźródło
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.
źródło
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.
źródło
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ść
źródło
W oficjalnych dokumentach: https://electronjs.org/docs/faq#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron
źródło
Wypróbowałem prawie wszystkie powyższe metody.
Wreszcie naprawiono to, dołączając
zaraz po załadowaniu plików statycznych, np.
{% load staticfiles %}
w base.htmlźródło
Po walce z tym problemem podjąłem trzy kroki:
<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.źródło