Bootstrap löst nicht erfassten Fehler aus: Das JavaScript von Bootstrap erfordert jQuery [geschlossen]

172

Ich versuche, Bootstrap zu verwenden, um eine Schnittstelle für ein Programm zu erstellen. Ich habe jQuery 1.11.0 zum <head>Tag hinzugefügt und dachte, das wäre das, aber wenn ich die Webseite in einem Browser starte, meldet jQuery einen Fehler:

Uncaught Error: Bootstrap's JavaScript requires jQuery

Ich habe versucht, jQuery 1.9.0 zu verwenden. Ich habe versucht, Kopien auf mehreren CDNs zu verwenden, aber ich kann es nicht zum Laufen bringen. Kann jemand darauf hinweisen, was ich falsch mache?

— Munim Munna
quelle

28

JQuery vor Bootstrap einschließen ...

— Adriano Repetti

In meinem Fall habe ich jquery vor dem Bootstrap installiert und dann hat es gut funktioniert. Nur vor dem Bootstrap wurde der Fehler nicht behoben.

— Stuti Verma

Ich mein Fall, anstatt jquery in der Fußzeile hinzuzufügen (wie in der Bootstrap-Vorlage); Ich habe es in der Kopfzeile hinzugefügt. Problem gelöst.

— Adeel Raza Azeemi

1

Fügen Sie einfach

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

vor dem Bootstrap-Importskript hinzu. Kopieren Sie das neueste CDN hier: cdnjs.com/libraries/jquery

— Tina Lee

371

Versuche dies

Ändern Sie die Reihenfolge der Dateien wie folgt.

<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.
quelle

85

Funktioniert bei mir nicht Ich habe jQuery vor Bootstrap und bekomme trotzdem den Fehler!

— Grün

2

funktionierte, bekam aber eine horizontale Bildlaufleiste am unteren Rand

— HimalayanCoder

1

Wenn dies nicht funktioniert, ist es möglicherweise so, dass jQuery über Bower installiert wird. Daher müssen Sie möglicherweise unter bower_components / jquery / dist / jquery.js nachsehen. Der "dist" -Teil ist das, was ich übersehen habe.

— Jax Cavalera

Arbeitete für mich für ein Django-Oscar-Projekt. Dieser Fehler wird aus heiterem Himmel angezeigt. Ich nehme an, dass das Durcheinander mit einem völlig unabhängigen Code die Rendersequenz ändern und diesen Fehler auslösen kann.

— MadPhysicist

anscheinend habe ich nicht bemerkt, dass ich bootstrap.js zweimal aufgenommen habe - das erste Mal war es lange vor der Abfrage

— JJ Roman

91

Wenn Sie sich in einer Nur-Browser-Umgebung befinden , verwenden Sie die SridharR -Lösung.

Wenn Sie sich in einer Node / CommonJS + Browser-Umgebung befinden (z. B. Elektron, Node-Webkit usw.); Der Grund für diesen Fehler ist, dass die Exportlogik von jQuery zuerst prüft module, nicht window:

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

Beachten Sie, dass es sich module.exportsin diesem Fall über exportiert . so jQueryund $sind nicht zugeordnet window.

Also, um dies zu lösen, anstatt <script src="path/to/jquery.js"></script>;

Weisen Sie es einfach selbst durch eine requireAussage zu:

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

HINWEIS: Wenn Ihre Elektronen-App nicht benötigt wird nodeIntegration, stellen Sie sie falseso ein , dass Sie diese Problemumgehung nicht benötigen.

— Onur Yıldırım
quelle

3

window.jQuery = window.$ = require('jquery');Dies funktionierte für mich, als ich versuchte, einen Brunch-Build mit jQuery 2 und Bootstrap 3 zusammenzustellen. Ich brauchte jedoch nur einige Stunden, um Ihre Antwort zu finden :(. Ändert sich diese Anforderung in späteren Versionen von jQuery?

— Rikkit

1

Ich weiß es nicht, aber da dies kein Fehler ist, denke ich nicht. Wenn Ihre Elektronen-App keine benötigt nodeIntegration, stellen Sie sie falseso ein , dass Sie diese Problemumgehung nicht benötigen.

— Onur Yıldırım

1

Sie müssen jquery mit npm install jquerynicht mit Laube installieren .

— Syodage

1

Nützlich, um zu sehen, wie Elektronen mit den Bibliotheken anders

— umgehen

Ich verstehe es immer noch nicht, aber Laravel verwendet den gleichen Ansatz: github.com/laravel/laravel/blob/v5.7.0/resources/js/…

— Ryan

14

Sie sollten zuerst jquery laden, da Bootstrap jquery-Funktionen verwendet. so was:

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

7

Sie müssen JQuery hinzufügen, bevor Sie Bootstrap- hinzufügen.

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

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

— Vivek Panday
quelle

4

Sie haben für JAVASCRIPT und BOOTSTRAP eine falsche Reihenfolge angegeben

Gemäß der Konvention muss der Bootstrap der Definition der JQuery-Datei folgen

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

1

In meinem Fall ist die Lösung wirklich albern und seltsam.

Der folgende Code wurde von der Datei _Layout.cshtml vorab ausgefüllt. (NICHT von mir geschrieben)

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

Bei der Überprüfung im Skriptordner war jquery-1.10.2.min.js jedoch nicht einmal verfügbar. Ersetzen Sie daher den Code wie unten, wobei jquery-1.9.1.min.js eine vorhandene Datei ist:

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

— Ashok Kumar
quelle

1

Ich verwende NodeJS und habe den gleichen Fehler erhalten. Wie bei den anderen Antworten lag das Problem auch darin, dass JQuery vor dem Bootstrap geladen werden musste. Aufgrund der NodeJS-Eigenschaften musste diese Änderung jedoch in der Datei pipe.js angewendet werden .

Die Änderung in Pipeline.js war wie folgt:

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',
];

Ich benutze auch Grunzen, um zu helfen, und es hat automatisch die Reihenfolge auf der HTML-Hauptseite geändert:

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

Ich hoffe es hilft! Du hast nicht gesagt, was deine Umgebung ist, also habe ich beschlossen, diese Antwort zu posten.

— Ernani
quelle

1

Wenn Sie verwenden, require.jsmüssen Sie window.$ = window.jQuery = require('jquery')in app.js hinzufügen

ODER Sie können eine abhängige Datei nach dem Laden der übergeordneten Datei laden

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

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

Der oben gezeigte Code bootstrapist abhängig von, Jqueryalso habe ich ihn hinzugefügt shimund abhängig gemacht

— SantoshK
quelle

0

Wenn Ihr Code gut aussieht, überprüfen Sie, ob jQuery erfolgreich auf Ihren Server geladen wurde. In meinem Fall wurden die jQuery-Dateien von meiner IDE auf dem Server veröffentlicht, aber der Webserver hatte nur einen 0-KB-Dateistub. Ohne Inhalt konnte der Server die Datei nicht an den Browser senden.

Nachdem ich die Datei erneut veröffentlicht und überprüft habe, ob der Server tatsächlich die gesamte Datei empfangen hat, hat meine Webseite den Fehler nicht mehr angezeigt.

— Zarepheth
quelle

0

Sie müssen JQuery js hinzufügen, bevor Sie die Bootstrap js-Datei hinzufügen, da BootStrap die jqueries-Funktion verwendet. Stellen Sie also sicher, dass Sie zuerst jquery js und dann bootstap js file laden.

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

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

— Jani Devang
quelle

0

Wenn dies nur im IE-Intranet auftritt, überprüfen Sie die Kompatibilitätseinstellungen und deaktivieren Sie "Intranetsites im Kompatibilitätsmodus anzeigen".

IE -> Einstellungen -> Kompatibilität

— Davut Gürbüz
quelle

0

In offiziellen Dokumenten: 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
quelle

1

Ich habe es auf angle.json mit dem Code "" scripts "behoben: [" node_modules / jquery / dist / jquery.min.js "," node_modules / bootstrap / dist / js / bootstrap.min.js "]"

— AntWo

0

Ich hatte fast alle oben genannten Methoden ausprobiert.

Schließlich behoben, indem die

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

direkt nach dem Laden der statischen Dateien, dh {% load staticfiles %}in base.html

— Kanika
quelle

0

Nachdem ich mit diesem Problem zu kämpfen hatte, machte ich drei Schritte:

Verwenden Sie jQuery-Versionen zwischen 1.9.0 und 3.0.0
Deklarieren Sie die jQuery-Datei, bevor Sie die Bootstrap-Datei deklarieren
Deklarieren Sie diese beiden Skriptdateien am unteren Rand der <body></body>Tags und nicht am <head></head>. Diese haben bei mir funktioniert, aber je nach verwendetem Browser kann es zu unterschiedlichen Verhaltensweisen kommen.

— Karisno1
quelle