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">
×
</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?
javascript
jquery
html
bootstrap-modal
chrzestny
źródło
źródło
Odpowiedzi:
Masz problem z kolejnością skryptów. Załaduj je w tej kolejności:
Dlaczego to? Ponieważ Bootstrap JS zależy od jQuery :
źródło
$
jest to funkcja jQuery. Najprawdopodobniej jest toquerySelector
funkcja (nazwana$
), którą ujawniają narzędzia deweloperskie Google Chrome.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.
źródło
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ł.
źródło
jQuery powinno być pierwszym:
źródło
Przyczyny błędu TypeError: $ (…) .modal nie jest funkcją:
Rozwiązania:
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
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 modalnegoaliasy zdarzeń jQuery podoba
.load
,.unload
albo.error
przestarzałe, ponieważ jQuery 1.8.LUB spróbuj bezpośrednio otworzyć wyskakujące okienko modalne
źródło
zmienić kolejność skryptu
Ponieważ bootstrap jest wtyczką jquery, więc wymaga Jquery do wykonania
źródło
Zmiana instrukcji importu zadziałała. Z
do:
źródło
Biegać
w projekcie, aby dodać typy jQuery w projekcie Angular. Po tym dołącz
w swoim app.module.ts
Dodaj
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.
źródło
Napotykam ten błąd podczas integracji modalnego bootstrapa w angular.
To jest moje rozwiązanie, aby rozwiązać ten problem.
Dzielę się, o kogo chodzi
Pierwszym krokiem musi zainstalować
jquery
ibootstrap
przeznpm
komendy.Po drugie, musisz dodać
declare var $ : any;
komponentI można użyć
$('#myModal').modal('hide');
metody onSave ()Demo https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts
źródło
Posługiwać się:
źródło
Problem zdarzył się tylko w produkcji tylko dlatego, że zaimportowałem jquery z HTTP a nie HTTPS (a produkcja to HTTPS)
źródło
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
async
znaki 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
async
zestaw tylko dla środowisk produkcyjnych, może to być naprawdę frustrujące.źródło
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):
(po):
Znalazłem odpowiedź tutaj: https://github.com/ColorlibHQ/AdminLTE/issues/685
źródło
bootstrap.min.css
jquery.min.js
bootstrap.min.js
źródło