Modalny bootstrap: nie jest funkcją

108

Mam modal na mojej stronie. Kiedy próbuję go wywołać podczas ładowania systemu Windows, wyświetla na konsoli błąd, który mówi:

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

To jest mój modalny kod 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>

A to jest mój JavaScript, z którym mogę go uruchomić po załadowaniu okna:

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

Jak mogę rozwiązać ten problem?

chrzestny
źródło
1
napisz swój modalny kod wyzwalający w funkcji gotowości okna
yugi
"$ (window) .load (function () {" uratował mnie
khaled_webdev
1
Po dwukrotnym zdefiniowaniu instancji JQuery pojawi się problem. <script src = "// code.jquery.com/jquery-1.11.0.min.js"> </script>
pragadeesh

Odpowiedzi:

169

Masz problem z kolejnością skryptów. Załaduj je w tej kolejności:

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

Dlaczego to? Ponieważ Bootstrap JS zależy od jQuery :

Zależności wtyczek

Niektóre wtyczki i komponenty CSS zależą od innych wtyczek. Jeśli dołączasz wtyczki indywidualnie, upewnij się, że sprawdziłeś te zależności w dokumentach. Zwróć również uwagę, że wszystkie wtyczki zależą od jQuery (oznacza to, że jQuery musi znajdować się przed plikami wtyczek ).

Ionică Bizău
źródło
2
Nadal mam ten problem, gdy próbuję uruchomić modal za pomocą narzędzi Google dla deweloperów.
Kontener kodowany
@CodedContainer Upewnij się, że $jest to funkcja jQuery. Najprawdopodobniej jest to querySelectorfunkcja (nazwana $), którą ujawniają narzędzia deweloperskie Google Chrome.
Ionică Bizău,
72

To ostrzeżenie może być również wyświetlane, jeśli jQuery jest zadeklarowane więcej niż raz w kodzie. Druga deklaracja jQuery uniemożliwia poprawne działanie bootstrap.js.

<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>
Nurp
źródło
dzięki za ten punkt, napotkałem ten problem i stwierdziłem, że mój własny DataTable.min.js zaimportował do niego biblioteki jquery, ale moja strona importuje go ponownie, to jest przyczyną problemu głównego.
Alter Hu
Bardzo dobra wskazówka, miałem zainstalowany jquery npm w Aurelii, a także ręcznie załadowany w index.html. Dzięki!
IngoB
W dużym frameworku, na którym pracuję, z okropną konfiguracją, jQuery jest ładowany na niektórych stronach, ale na innych: po kilkukrotnym uderzeniu głową wróciłem tutaj i przeczytałem odpowiedź @Nurp. Uratowałem mój dzień.
Nineoclick
Problem polega na tym, że używam aplikacji, która jest zależna od starszej wersji jquery i nie mogę jej zmieniać i jest ona później importowana na pewnym etapie! Użyłem najnowszej wersji jquery, a następnie uruchomiłem js, co spowodowało wszystkie problemy!
heman123
To też był mój problem. Usunąłem jquery z sekcji skryptów w angular.js, a także usunąłem „import * as $ from 'jquery'” z Typescript i wszystko działało.
Jens Mander,
15

Problem jest spowodowany tym, że instancje jQuery występują więcej niż jeden raz. Uważaj, jeśli używasz wielu plików z wielokrotnymi wystąpieniami jQuery. Po prostu zostaw 1 instancję jQuery, a Twój kod będzie działał.

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
Juan Camilo Colmenares Rocha
źródło
14

jQuery powinno być pierwszym:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
dashtinejad
źródło
14

Przyczyny błędu TypeError: $ (…) .modal nie jest funkcją:

  1. Skrypty są ładowane w złej kolejności.
  2. Wiele instancji jQuery

Rozwiązania:

  1. W przypadku, gdy skrypt próbuje uzyskać dostęp do elementu, który nie został jeszcze osiągnięty, pojawi się błąd. Bootstrap zależy od jQuery, więc najpierw należy odwołać się do jQuery. Tak więc, musisz nazywać się jquery.min.js, a następnie bootstrap.min.js, a ponadto błąd modalny bootstrap jest w rzeczywistości wynikiem tego, że nie dołączasz javascript bootstrapa przed wywołaniem funkcji modalnej. Modal jest zdefiniowany w pliku bootstrap.js, a nie w jQuery. Więc skrypt powinien być zawarty w ten sposób

       <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
       <script type="text/javascript" src="js/bootstrap.js"></script>
  2. W przypadku, gdy istnieje wiele wystąpień jQuery, druga deklaracja jQuery uniemożliwia poprawne działanie bootstrap.js. więc skorzystaj z jQuery.noConflict();przed wywołaniem wyskakującego okienka modalnego

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

    aliasy zdarzeń jQuery podoba .load, .unloadalbo .errorprzestarzałe, ponieważ jQuery 1.8.

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

    LUB spróbuj bezpośrednio otworzyć wyskakujące okienko modalne

    $('#prizePopup').on('shown.bs.modal', function () {
          ...
    });
Nɪsʜᴀɴᴛʜ ॐ
źródło
Dzięki, w moim przypadku ładowałem dwie instancje jQuery.
Sanjay Achar
10

zmienić kolejność skryptu

Ponieważ bootstrap jest wtyczką jquery, więc wymaga Jquery do wykonania

Vitorino fernandes
źródło
5

Zmiana instrukcji importu zadziałała. Z

import * as $ from 'jquery';

do:

declare var $ : any;
ranjeet8082
źródło
4

Biegać

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

w projekcie, aby dodać typy jQuery w projekcie Angular. Po tym dołącz

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

w swoim app.module.ts

Dodaj

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

w swoim index.html tuż przed zamykającym tagiem body.

Jeśli używasz Angulara 2-7, umieść „ jquery ” w polu typów w pliku tsconfig.app.json.

Spowoduje to usunięcie wszystkich błędów „modal” i „$” w Twoim projekcie Angular.

cyperpunk
źródło
1

Posługiwać się:

jQuery.noConflict();
$('#prizePopup').modal('toggle');
Jerson Martínez
źródło
0

Problem zdarzył się tylko w produkcji tylko dlatego, że zaimportowałem jquery z HTTP a nie HTTPS (a produkcja to HTTPS)

Patrick z zespołu NDepend
źródło
0

Trochę spóźniłem się na imprezę, ale jest ważna uwaga:

Twoje skrypty mogą być we właściwej kolejności, ale uważaj na wszelkie asyncznaki w tagu skryptu (w ten sposób)

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

To może być przyczyną problemu. Szczególnie jeśli masz ten asynczestaw tylko dla środowisk produkcyjnych, może to być naprawdę frustrujące.

Martin Shishkov
źródło
Kod w pytaniu wyraźnie pokazuje, że (a) nie są we właściwej kolejności i (b) nie używają atrybutu asynchronicznego
Quentin
1
Udzielam odpowiedzi, ponieważ jest to często wyszukiwane w Google pytanie i ktoś może na nim skorzystać
Martin Shishkov
0

Starałem się rozwiązać ten problem, sprawdziłem kolejność ładowania i czy jQuery został dołączony dwukrotnie poprzez sprzedaż wiązaną, ale to nie wydawało się być przyczyną.

Wreszcie naprawiono to, wprowadzając następującą zmianę:

(przed):

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

(po):

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

Znalazłem odpowiedź tutaj: https://github.com/ColorlibHQ/AdminLTE/issues/685

WeekendHacker
źródło
-1

Musisz dołączyć:

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

J4GD33P 51NGH
źródło