Używam modalnego przykładu z dokumentacji bootstrap 3. modalne działa. jednak muszę uzyskać dostęp do zdarzenia show.bs.modal, gdy jest uruchamiane. na razie próbuję tylko:
$('#myModal').on('show.bs.modal', function () {
alert('hi')
})
Nic się nie dzieje, zdarzenie nie jest uruchamiane. Co ja robię źle??? To nie ma dla mnie sensu.
Odpowiedzi:
Użyj tego:
$(document).on('show.bs.modal','#myModal', function () {
alert('hi');
})
$(data).modal('show');.
$(document).on('hidden.bs.modal', function (e) { if (e.target.id === 'my-modal-id') { alert('hi'); } });. Id tu pochodzi z<div class="modal fade" id="my-modal-id">
$(document).on(..., dołączasz swój słuchacz do kontekstu dokumentu i nie ma znaczenia, czy twoje elementy docelowe istnieją, czy nie. Powinieneś dodać nazwę zdarzenia jako pierwszy argument, a funkcję wywołania zwrotnego jako ostatni, ale możesz dodać selektor zapytania jako drugi argument
Upewnij się, że umieściłeś swój on('shown.bs.modal')przed utworzeniem wystąpienia modalu, aby się pojawił
$("#myModal").on("shown.bs.modal", function () {
alert('Hi');
});
$("#myModal").modal('show'); //This can also be $("#myModal").modal({ show: true });
lub
$("#myModal").on("shown.bs.modal", function () {
alert('Hi');
}).modal('show');
Aby skupić się na polu, lepiej jest użyć shown.bs.modalzamiast tego, show.bs.modalale może z innych powodów chcesz ukryć coś w tle lub ustawić coś tuż przed rozpoczęciem wyświetlania modalu, użyj show.bs.modalfunkcji.
$(document).on().
show.bs.modalróżni się od shown.bs.modal. Ten pierwszy uruchamia się, gdy modal ma się pokazać. To drugie, kiedy zostało pokazane. Duży inny.
.modal('show'). Istnieją cztery imprezy Wymaga to czasowniki modalne: [ show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal] - pokazuje to, kiedy ma zamiar pokazać, pokazano, gdy jest widoczne, to samo dla skór i ukryte. getbootstrap.com/docs/3.4/javascript/#modals-events
Umieść swoją funkcję w $(document).ready(function() {lub po prostu $(function() {. W CoffeeScript wyglądałoby to tak
$ ->
$('#myModal').on 'show.bs.modal', (event)->
Bez tego JavaScript jest wykonywany przed załadowaniem dokumentu i #myModalnie jest jeszcze częścią DOM. Oto odniesienie do Bootstrap .
$(document).on('shown.bs.modal','.modal', function () {
/// TODO EVENTS
});
.modalzamiast odwoływania się do identyfikatora modalnego ... dzięki!
Spróbuj tego
$('#myModal').on('shown.bs.modal', function () {
alert('hi');
});
Używając shownzamiast, showupewnij się, że na końcu funkcji i ostrzeżenia znajdują się średniki.
Przydarzyło mi się coś podobnego i rozwiązałem za pomocą setTimeout.
Bootstrap używa następującego limitu czasu do zakończenia wyświetlania:
c.TRANSITION_DURATION = 300, c.BACKDROP_TRANSITION_DURATION = 150,
Więc używanie ponad 300 musi działać, a dla mnie działa 200:
$('#myModal').on('show.bs.modal', function (e) {
setTimeout(function(){
//Do something if necessary
}, 300);
})
W moim przypadku brakowało mi div .modal-dialog
Nie uruchamia zdarzenia: shown.bs.modal
<div id="loadingModal" class="modal fade">
<p>Loading...</p>
</div>
Czy zdarzenie pożarowe: pokazane.bs.modalne
<div id="loadingModal" class="modal fade">
<div class="modal-dialog">
<p>Loading...</p>
</div>
</div>
Miałem podobny, ale inny problem i nadal nie mogę pracować, gdy używam $ ('# myModal'). Udało mi się to uruchomić, gdy używam $ (okno).
Mój inny problem polega na tym, że stwierdziłem, że zdarzenie show nie zostanie uruchomione, jeśli przechowuję zawartość html modalnego div w zmiennej javascript, takiej jak.
var content="<div id='myModal' ...";
$(content).modal();
$(window).on('show.bs.modal', function (e) {
alert('show test');
});
zdarzenie nigdy nie zostało uruchomione, ponieważ nie wystąpiło
moją poprawką było włączenie elementów div w treści HTML
<body>
<div id='myModal'>
...
</div>
<script>
$('#myModal).modal();
$(window).on('show.bs.modal', function (e) {
alert('show test');
});
</script>
</body>
Pamiętaj, aby umieścić skrypt po wywołaniu "js / bootstrap", a nie przed.
Upewnij się, że ładujesz jQuery przed użyciem Bootstrap. Brzmi prosto, ale miałem problemy z wychwyceniem tych zdarzeń modalnych i okazało się, że błąd nie był związany z moim kodem, ale że ładowałem Bootstrap przed jQuery.
Czasami to nie działa, jeśli:
1) masz błąd w kodzie skryptu java przed wierszem z $('#myModal').on('show.bs.modal'...) . Aby rozwiązać problem, umieść komunikat ostrzegawczy przed wierszem, aby sprawdzić, czy pojawia się po załadowaniu strony. Aby rozwiązać problem, usuń JS powyżej, aby zobaczyć, który z nich jest problemem
2) Innym problemem jest ładowanie JS w złej kolejności. Na przykład możesz mieć $('#myModal').on('show.bs.modal'...)część przed faktycznym załadowaniem JQuery.js. W takim przypadku wywołanie zostanie zignorowane, więc najpierw w kodzie HTML (dla pewności wyświetl źródło strony) sprawdź, czy łącze skryptu do JQuery znajduje się powyżej onShowwywołania modalnego , w przeciwnym razie zostanie zignorowane. Aby rozwiązać problem, umieść alert w programie pokazanym wcześniej. Jeśli widzisz poprzedni, a nie ten wewnątrz funkcji onShow, jasne jest, że funkcja nie może zostać wykonana. Jeśli pisownia jest poprawna, najprawdopodobniej wywołanie JQuery.js nie zostanie wykonane lub zostanie wykonane po onShowczęści
$('#myModal').on('show.bs.modal'...)musi być po załadowaniu JQuery. Dzięki!
Miałem ten sam problem z bootstrap4. Rozwiązaniem było dodanie go wewnątrz funkcji ready () dokumentu jQuery:
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function () {
alert('hi')
})
}
Upewnij się, że naprawdę używasz modalu bootstrap jquery, a nie innego modalu jquery.
Zmarnowałem na to zbyt dużo czasu ...
Miałem ten sam problem. Dla mnie było to, że dwukrotnie załadowałem jquery w tej kolejności:
Kiedy jQuery został załadowany po raz drugi, w jakiś sposób zepsuł odniesienia do bootstrap i modal się otworzył, ale metoda on ('shown.bs ..') nigdy nie została uruchomiona.
W moim przypadku problemem był komentarz travelsize .. Kolejność importu między bootstrap.js i jquery. Ponieważ używam szablonu Metronic i nie sprawdzam wcześniej
Użyłem delegowania zdarzeń / bąbelków jQuery ... które zadziałały. Zobacz poniżej:
$(document).on('click', '#btnSubmit', function () {
alert('hi loo');
})
również bardzo dobre informacje: https://learn.jquery.com/events/event-delegation/
Dzieje się tak, gdy kod mógł zostać wykonany wcześniej i nie jest wyświetlany, więc możesz dodać do niego timeout () tp fire.
$(document).on('shown.bs.modal', function (event) {
setTimeout(function(){
alert("Hi");
},1000);
});