Bootstrap modal: ist keine Funktion

Ich habe ein Modal auf meiner Seite. Wenn ich versuche, es beim Laden von Windows aufzurufen, wird ein Fehler an die Konsole ausgegeben, der besagt:

$(...).modal is not a function

Dies ist mein Modal HTML:

<div class="modal fade" id="prizePopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
                This Modal title
            </h4>
        </div>
        <div class="modal-body">
            Add some text here
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">
                Submit changes
            </button>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Und dies ist mein JavaScript, mit dem ich es ausführen kann, wenn ein Fenster geladen wird:

<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

Wie kann ich dieses Problem beheben?

Sie haben ein Problem in der Reihenfolge der Skripte. Laden Sie sie in dieser Reihenfolge:

<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- BS JavaScript -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- Have fun using Bootstrap JS -->
<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

Warum das? Weil Bootstrap JS von jQuery abhängt :

Plugin-Abhängigkeiten

Einige Plugins und CSS-Komponenten hängen von anderen Plugins ab. Wenn Sie Plugins einzeln einfügen, überprüfen Sie diese Abhängigkeiten in den Dokumenten. Beachten Sie auch, dass alle Plugins von jQuery abhängen (dies bedeutet, dass jQuery vor den Plugin-Dateien enthalten sein muss ).

Diese Warnung kann auch angezeigt werden, wenn jQuery in Ihrem Code mehrmals deklariert ist. Die zweite jQuery-Deklaration verhindert, dass bootstrap.js ordnungsgemäß funktioniert.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
...
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Das Problem ist darauf zurückzuführen, dass jQuery-Instanzen mehr als einmal vorhanden sind. Seien Sie vorsichtig, wenn Sie viele Dateien mit mehreren Instanzen von jQuery verwenden. Lassen Sie einfach 1 Instanz von jQuery und Ihr Code wird funktionieren.

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

jQuery sollte der erste sein:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

Ursachen für TypeError: $ (…) .modal ist keine Funktion:

1. Skripte werden in der falschen Reihenfolge geladen.
2. Mehrere jQuery-Instanzen

Lösungen:

1. Wenn ein Skript versucht, auf ein Element zuzugreifen, das noch nicht erreicht wurde, wird eine Fehlermeldung angezeigt. Bootstrap hängt von jQuery ab, daher muss zuerst auf jQuery verwiesen werden. Sie müssen also jquery.min.js und dann bootstrap.min.js heißen, und außerdem ist der Bootstrap-Modal-Fehler das Ergebnis davon, dass Sie das Javascript von Bootstrap nicht einschließen, bevor Sie die Modal-Funktion aufrufen. Modal ist in bootstrap.js und nicht in jQuery definiert. Das Skript sollte also auf diese Weise enthalten sein

      <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
      <script type="text/javascript" src="js/bootstrap.js"></script>

2. Falls mehrere Instanzen von jQuery vorhanden sind, verhindert die zweite jQuery-Deklaration, dass bootstrap.js ordnungsgemäß funktioniert. Nutzen Sie dies, jQuery.noConflict();bevor Sie das modale Popup aufrufen

   jQuery.noConflict();
   $('#prizePopup').modal('show');

   jQuery Ereignis Aliase wie .load, .unloadoder .errorseit jQuery 1.8 veraltet.

   $(window).on('load', function(){ 
         $('#prizePopup').modal('show');
   });

   ODER versuchen Sie, das modale Popup direkt zu öffnen

   $('#prizePopup').on('shown.bs.modal', function () {
         ...
   });

Ändern Sie die Reihenfolge des Skripts

Da Bootstrap ein JQuery-Plugin ist, muss Jquery ausgeführt werden

Das Ändern der Importanweisung hat funktioniert. Von

import * as $ from 'jquery';

zu:

declare var $ : any;

Lauf

npm i @types/jquery
npm install -D @types/bootstrap

im Projekt, um die Abfragetypen in Ihrem Winkelprojekt hinzuzufügen. Danach einschließen

import * as $ from "jquery";
import * as bootstrap from "bootstrap";

in Ihrer app.module.ts

Hinzufügen

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

in Ihrer index.html kurz vor dem Body Closing Tag.

Wenn Sie Angular 2-7 ausführen, fügen Sie " jquery " in das Feld types der Datei tsconfig.app.json ein.

Dadurch werden alle Fehler von 'modal' und '$' in Ihrem Angular-Projekt entfernt.

Ich treffe diesen Fehler, wenn ich modalen Bootstrap in Angular integriere.

Dies ist meine Lösung, um dieses Problem zu lösen.

Ich teile für wen Sorge.

Erster Schritt, den Sie installieren müssen jqueryund bootstrapdurchnpm Befehl.

Zweitens müssen Sie hinzufügen declare var $ : any; Komponente

Und verwenden kann verwenden $('#myModal').modal('hide'); onSave () -Methode verwenden

Demo https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

Verwenden:

jQuery.noConflict();
$('#prizePopup').modal('toggle');

Das Problem ist mir nur in der Produktion passiert, nur weil ich jquery mit HTTP und nicht mit HTTPS importiert habe (und die Produktion ist HTTPS).

Ich bin etwas spät zur Party, aber es gibt einen wichtigen Hinweis:

Ihre Skripte sind möglicherweise in der richtigen Reihenfolge, achten Sie jedoch auf asyncs in Ihrem Skript-Tag (wie folgt).

<script type="text/javascript" src="js/bootstrap.js" async></script>

Dies könnte das Problem verursachen. Insbesondere wenn Sie dieses asyncSet nur für Produktionsumgebungen haben, kann es sehr frustrierend sein, darüber nachzudenken.

Ich hatte Mühe, dieses Problem zu lösen, überprüfte die Ladereihenfolge und ob jQuery zweimal per Bündelung enthalten war, aber das schien nicht die Ursache zu sein.

Behebung des Problems durch folgende Änderung:

(Vor):

$('#myModal').modal('hide');

(nach dem):

window.$('#myModal').modal('hide');

Die Antwort finden Sie hier: https://github.com/ColorlibHQ/AdminLTE/issues/685

Sie müssen Folgendes angeben:

bootstrap.min.css
jquery.min.js
bootstrap.min.js