Ich verwende das modale Beispiel aus den Bootstrap 3-Dokumenten. Das Modal funktioniert. Ich muss jedoch auf das Ereignis show.bs.modal zugreifen, wenn es ausgelöst wird. im Moment versuche ich nur:
$('#myModal').on('show.bs.modal', function () {
alert('hi')
})
Es passiert nichts, das Ereignis wird nicht ausgelöst. Was mache ich falsch??? Das ergibt für mich keinen Sinn.
Antworten:
benutze das:
$(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 hier kommt von<div class="modal fade" id="my-modal-id">
$(document).on(..., hängen Sie Ihren Listener an den Dokumentkontext an , und es spielt keine Rolle, ob Ihre Zielelemente vorhanden sind oder nicht. Sie sollten den Ereignisnamen als erstes Argument und die Rückruffanction als letztes hinzufügen, aber Sie können einen Abfrageselektor als zweites Argument hinzufügen
Stellen Sie sicher, dass Sie Ihre setzen, on('shown.bs.modal')bevor Sie das Modal zum Popup instanziieren
$("#myModal").on("shown.bs.modal", function () {
alert('Hi');
});
$("#myModal").modal('show'); //This can also be $("#myModal").modal({ show: true });
oder
$("#myModal").on("shown.bs.modal", function () {
alert('Hi');
}).modal('show');
Um sich auf ein Feld zu konzentrieren, ist es besser, das shown.bs.modalanstelle von zu verwenden, show.bs.modalaber vielleicht aus anderen Gründen, wenn Sie etwas im Hintergrund verbergen oder etwas einstellen möchten, bevor das Modal angezeigt wird, verwenden Sie die show.bs.modalFunktion.
$(document).on().
show.bs.modalist anders als shown.bs.modal. Ersteres wird ausgelöst, wenn das Modal angezeigt wird. Letzteres, wenn es gezeigt wurde. Ganz anders.
show.bs.modal?
.modal('show'). Es gibt vier Veranstaltungen für modals ruft: [ show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal] - Show ist , wenn es zeigen , wird gezeigt , wenn es angezeigt wird , das gleiche für Haut und versteckt. getbootstrap.com/docs/3.4/javascript/#modals-events
Wickeln Sie Ihre Funktion in $(document).ready(function() {oder einfacher ein $(function() {. In CoffeeScript würde dies so aussehen
$ ->
$('#myModal').on 'show.bs.modal', (event)->
Ohne sie wird das JavaScript ausgeführt, bevor das Dokument geladen wird, und #myModalist noch nicht Teil des DOM. Hier ist die Bootstrap-Referenz .
$(document).on('shown.bs.modal','.modal', function () {
/// TODO EVENTS
});
.modalals wäre es die Lösung , mit zu arbeiten, anstatt auf die Modal-ID zu verweisen ... danke!
Versuche dies
$('#myModal').on('shown.bs.modal', function () {
alert('hi');
});
Verwenden Sie shownstatt showauch sicherzustellen, dass Sie Ihre Semikolons am Ende Ihrer Funktion und Alarm haben.
Ähnliches ist mir passiert und ich habe es mit setTimeout gelöst.
Bootstrap verwendet das folgende Zeitlimit, um die Anzeige abzuschließen:
c.TRANSITION_DURATION = 300, c.BACKDROP_TRANSITION_DURATION = 150,
Die Verwendung von mehr als 300 muss also funktionieren und für mich funktionieren 200:
$('#myModal').on('show.bs.modal', function (e) {
setTimeout(function(){
//Do something if necessary
}, 300);
})
In meinem Fall fehlte mir das .modal-dialog div
Feuert kein Ereignis ab: selected.bs.modal
<div id="loadingModal" class="modal fade">
<p>Loading...</p>
</div>
Feuert ein Ereignis an: gezeigt.bs.modal
<div id="loadingModal" class="modal fade">
<div class="modal-dialog">
<p>Loading...</p>
</div>
</div>
Ich hatte ein ähnliches, aber anderes Problem und konnte immer noch nicht arbeiten, wenn ich $ ('# myModal') verwende. Ich konnte es zum Laufen bringen, wenn ich $ (Fenster) benutze.
Mein anderes Problem ist, dass ich festgestellt habe, dass das Show-Ereignis nicht ausgelöst wird, wenn ich meinen modalen div-HTML-Inhalt in einer Javascript-Variablen wie gespeichert habe.
var content="<div id='myModal' ...";
$(content).modal();
$(window).on('show.bs.modal', function (e) {
alert('show test');
});
Das Ereignis wurde nie ausgelöst, weil es nicht aufgetreten ist
Mein Fix war, die Divs in den HTML-Body aufzunehmen
<body>
<div id='myModal'>
...
</div>
<script>
$('#myModal).modal();
$(window).on('show.bs.modal', function (e) {
alert('show test');
});
</script>
</body>
Denken Sie daran, das Skript nach dem Aufruf von "js / bootstrap" zu setzen, nicht vorher.
Stellen Sie sicher, dass Sie jQuery laden, bevor Sie Bootstrap verwenden. Klingt einfach, aber ich hatte Probleme beim Abfangen dieser modalen Ereignisse und es stellte sich heraus, dass der Fehler nicht bei meinem Code lag, sondern dass ich Bootstrap vor jQuery geladen habe.
Manchmal funktioniert das nicht, wenn:
1) Sie haben einen Fehler im Java-Skriptcode vor Ihrer Zeile mit $('#myModal').on('show.bs.modal'...). Um Fehler zu beheben, setzen Sie eine Warnmeldung vor die Zeile, um festzustellen, ob sie beim Laden der Seite angezeigt wird. Um dies zu beheben, entfernen Sie die oben genannten JSs, um festzustellen, welches das Problem ist
2) Ein weiteres Problem ist, wenn Sie das JS in falscher Reihenfolge laden. Beispielsweise können Sie das $('#myModal').on('show.bs.modal'...)Teil haben, bevor Sie JQuery.js tatsächlich laden. In diesem Fall wird Ihr Aufruf ignoriert. Überprüfen Sie daher zunächst im HTML-Code (um sicherzugehen, dass die Seitenquelle angezeigt wird), ob sich der Skriptlink zu JQuery über Ihrem modalen onShowAufruf befindet. Andernfalls wird er ignoriert. Um Fehler zu beheben, geben Sie eine Warnung in die On-Show ein. Wenn Sie die vorherige und nicht die in der onShow-Funktion sehen, ist klar, dass die Funktion nicht ausgeführt werden kann. Wenn die Schreibweise mehr als wahrscheinlich ist, erfolgt Ihr Aufruf von JQuery.js nicht oder nach dem onShowTeil
$('#myModal').on('show.bs.modal'...)muss sein, nachdem JQuery geladen wurde. Vielen Dank!
Ich hatte das gleiche Problem mit bootstrap4. Die Lösung bestand darin, es in die Funktion jQuery document ready () einzufügen:
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function () {
alert('hi')
})
}
Stellen Sie sicher, dass Sie wirklich das Bootstrap- JQuery-Modal und kein anderes JQuery-Modal verwenden.
Viel zu viel Zeit damit verschwendet ...
Hatte das gleiche Problem. Für mich war es, dass ich jquery zweimal in dieser Reihenfolge geladen habe:
Als jQuery das zweite Mal geladen wurde, wurden die Verweise auf Bootstrap irgendwie gebrochen und das Modal geöffnet, aber die on-Methode ('selected.bs ..') wurde nie ausgelöst.
In meinem Fall war das Problem, wie Travelize-Kommentar. Die Reihenfolge der Importe zwischen bootstrap.js und jquery. Weil ich die Vorlage Metronic verwende und vorher nicht überprüfe
Ich habe jQuerys Event-Delegation / Bubbling verwendet ... das hat bei mir funktioniert. Siehe unten:
$(document).on('click', '#btnSubmit', function () {
alert('hi loo');
})
Sehr gute Infos auch: https://learn.jquery.com/events/event-delegation/
Dies ist der Fall, wenn Code zuvor ausgeführt wurde und nicht angezeigt wird, sodass Sie timeout () für tp fire hinzufügen können.
$(document).on('shown.bs.modal', function (event) {
setTimeout(function(){
alert("Hi");
},1000);
});