wake-up-neo.com

Bootstrap wirft Fehler ab: Bootstraps JavaScript erfordert jQuery

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 sei das, aber beim Starten der Webseite in einem Browser meldet jQuery einen Fehler:

Uncaught Error: Bootstrap's JavaScript requires jQuery

Ich habe versucht, mit jQuery 1.9.0 zu arbeiten, ich habe es mit Kopien auf mehreren CDNs versucht, aber ich bekomme es nicht. Kann jemand sagen, was ich falsch mache?

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3
149
user3327457

Versuche dies 

Ändern Sie die Reihenfolge der Dateien wie unten angegeben.

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

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

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

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

Beachten Sie, dass es sich in diesem Fall über module.exports selbst exportiert. jQuery und $ werden nicht window zugewiesen. 

Um dies zu beheben, anstelle von <script src="path/to/jquery.js"></script>; 

Weisen Sie es einfach selbst durch eine require-Anweisung zu:

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

HINWEIS: Wenn Ihre Elektron-App keine nodeIntegration benötigt, setzen Sie sie auf false, damit Sie diese Problemumgehung nicht benötigen.

76
Onur Yıldırım

sie sollten Jquery zuerst laden, da Bootstrap Jquery-Funktionen . wie folgt verwendet:

<!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>
11
N J

Sie müssen JQuery hinzufügen, bevor Sie bootstrap-

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

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

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

bootstrap muss der Definition der Jquery-Datei entsprechen

<!-- 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>
2
Mohit Singh

In meinem Fall ist die Lösung wirklich dumm 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 Ordner "Scripts" war jquery-1.10.2.min.js jedoch nicht verfügbar. Ersetzen Sie daher den folgenden Code, 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>
1
Ashok kumar

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

ODER Sie können das Laden der abhängigen Datei nach dem Laden der übergeordneten Datei vornehmen, wie z. B. unter Konzept 

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

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

Im obigen Code wurde gezeigt, dass bootstrap von Jquery abhängig ist, also habe ich shim hinzugefügt und es abhängig gemacht 

1
SantoshK

Ich verwende NodeJS und habe den gleichen Fehler erhalten. Wie bei den anderen Antworten lag das Problem auch darin, dass JQuery vor Bootstrap geladen werden musste. Aufgrund der NodeJS-Eigenschaften musste diese Änderung jedoch in der Datei pipeline.js vorgenommen 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 Grunt, um zu helfen, und es hat automatisch die Reihenfolge in der Haupt-HTML-Seite 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! Sie haben nicht gesagt, wie Ihre Umgebung ist, also habe ich beschlossen, diese Antwort zu posten.

1
Ernani

Auf 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>
0
Fabio Souza

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, der Webserver hatte jedoch nur einen 0-KB-Dateistub. Ohne Inhalt konnte der Server die Datei nicht an den Browser liefern.

Nach dem erneuten Veröffentlichen der Datei und dem Überprüfen, ob der Server die gesamte Datei tatsächlich erhalten hat, hat meine Webseite den Fehler nicht mehr angezeigt.

0
Zarepheth

Ich hatte fast alle oben genannten Methoden ausprobiert. 

Zum Schluss wurde das Problem behoben 

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

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

0
kanika

Wenn dies nur bei IE Intranet der Fall ist, überprüfen Sie die Kompatibilitätseinstellungen und deaktivieren Sie "Intranetseiten im Kompatibilitätsmodus anzeigen". 

IE -> Einstellungen -> Kompatibilität 

 enter image description here

0
Davut Gürbüz

Sie müssen JQuery-Js hinzufügen, bevor Sie die Bootstrap-JS-Datei hinzufügen, da BootStrap die Jquery-Funktion verwendet. Stellen Sie daher sicher, dass Sie zuerst jquery js und dann bootstrap js laden.

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

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

Nachdem ich mich mit diesem Problem auseinandergesetzt hatte, machte ich drei Schritte:

  1. Verwenden Sie jQuery-Versionen an beliebiger Stelle zwischen 1.9.0 und 3.0.0
  2. Deklarieren Sie die jQuery-Datei, bevor Sie die Bootstrap-Datei deklarieren
  3. Deklarieren Sie diese beiden Skriptdateien am Ende der <body></body>-Tags und nicht im <head></head>. Diese haben für mich funktioniert, aber je nach verwendetem Browser können unterschiedliche Verhaltensweisen auftreten.
0
Karisno1