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?
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>
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.
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>
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>
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>
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>
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
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.
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>
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.
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
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>
Nachdem ich mich mit diesem Problem auseinandergesetzt hatte, machte ich drei Schritte:
<body></body>
-Tags und nicht im <head></head>
. Diese haben für mich funktioniert, aber je nach verwendetem Browser können unterschiedliche Verhaltensweisen auftreten.