webentwicklung-frage-antwort-db.com.de

Bootstrap-Modal: ist keine Funktion

Ich habe eine Modalität auf meiner Seite. Wenn ich versuche, es beim Laden des Fensters aufzurufen, wird auf der Konsole ein Fehler mit folgendem Befehl ausgegeben: 

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

Dies ist mein modales 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 zum Ausführen, wenn ein Fenster geladen wird:

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

Wie kann ich dieses Problem beheben?

javascriptjqueryhtmlbootstrap-modal
75
godheaper

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 einbeziehen, stellen Sie sicher, dass Sie diese Abhängigkeiten in den Dokumenten überprüfen. Beachten Sie auch, dass alle Plugins von jQuery abhängen (das bedeutet, dass jQuery vor den Plugin-Dateien enthalten sein muss).

113
Ionică Bizău

Diese Warnung kann auch angezeigt werden, wenn jQuery in Ihrem Code mehr als einmal 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>
54
Nurp

Das Problem ist darauf zurückzuführen, dass mehrere jQuery-Instanzen vorhanden sind. Seien Sie vorsichtig, wenn Sie viele Dateien mit mehreren Exemplaren von jQuery verwenden. Lassen Sie einfach eine Instanz von jQuery und der Code funktioniert.

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

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>
10
dashtinejad

Ändern Sie die Reihenfolge des Skripts

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

7
Vitorino fernandes

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

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

Lösungen:

  1. Falls ein Skript versucht, auf ein Element zuzugreifen, das noch nicht erreicht wurde, erhalten Sie eine Fehlermeldung. 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 und weiterhin bootstrap als Modalfehler bezeichnen, da Sie vor dem Aufrufen der Modalfunktion das Javascript von bootstrap nicht berücksichtigt haben. Modal ist in bootstrap.js und nicht in jQuery definiert. Das Skript sollte also auf diese Weise eingebunden werden

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

  2. Falls es mehrere Instanzen von jQuery gibt, verhindert die zweite jQuery-Deklaration, dass bootstrap.js ordnungsgemäß funktioniert. Verwenden Sie also jQuery.noConflict();, bevor Sie das modale Popup aufrufen

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

    aliasnamen für jQuery-Ereignisse wie .load, .unload oder .error sind seit 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 () {
      ...
});
1
Nishanth ॐ

Ich treffe diese Störung, wenn ich modales bootstrap in eckiges integriere.

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

Ich teile für wen Sorge.

Als erstes müssen Sie jquery und bootstrap mit dem Befehl npm installieren.

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

Und use kann $('#myModal').modal('hide'); für die onSave () -Methode verwenden

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

1
Hien Nguyen

Das Ändern der Importanweisung hat funktioniert. Von

import * as $ from 'jquery';

zu:

declare var $ : any;
1
ranjeet8082

Das Problem ist mir gerade in der Produktion passiert, nur weil ich Jquery mit HTTP und nicht mit HTTPS importierte (und die Produktion ist HTTPS).

0
Patrick from NDepend team

Lauf

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

im Projekt, um die Abfragetypen in Ihrem Angular Projekt hinzuzufügen. Danach gehören

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

in Ihrem 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.

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

Dies entfernt alle Fehler von 'modal' und '$' in Ihrem Angular Projekt.

0
cyperpunk

Ich bin ein bisschen spät zur Party, es gibt jedoch eine wichtige Anmerkung:

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

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

Dies könnte das Problem verursachen. Besonders wenn Sie diese async-Einstellung nur für Produktionsumgebungen haben, kann dies sehr frustrierend werden.

0
Martin Shishkov