web-dev-qa-db-de.com

Rückruffunktion in modal von bootstrap3

Ich bin etwas verwirrt über das Auslösen einer Rückruffunktion in Javascript Modal von Bootstrap3. Im normalen jquery.post können Sie es wie 

$.post('path', { something: something }, function(data) { 
  console.log(data);
});

Aber in Bootstrap 3 Modal feuern wir das Modal durch das Skript ab und ich mache es auf diese Weise, wenn ich die Erklärung auf ihrer Website verstehe.

$('selector').modal('show', function() { 
  //here comes the problem, I have a button in the modal in the html, my code
  //if the button was clicked inside this modal is..

  $('#myButton').on('click', function() { 
     console.log("this is a try");
  });
});

Aber traurig zu sagen, wenn ich auf die Schaltfläche klicke, passiert nichts, nichts wurde in der Konsole angemeldet. Wie rufe ich eine Callback-Funktion in einem Modal von Bootstrap 3 auf?

21
HTTP

Für Bootstrap 3 sind die Ereignisse jetzt mit einem Namensbereich versehen, das show-Ereignis für das Modal wäre also show.bs.modal...

$('#myModal').on('show.bs.modal', function (e) {
    alert('modal show');
});

Demo: http://bootply.com/90952

28
Zim

@Skelly ist richtig, Sie können das show.bs.modal-Ereignis wie folgt verwenden:

$('#myModal').on('show.bs.modal', function (e) {
    alert('modal show');
});

Die offizielle Dokumentation sagt:

Dieses Ereignis wird sofort ausgelöst, wenn die Show-Instanzmethode aufgerufen wird.

Bitte beachten Sie, dass dieses Ereignis "ziemlich bald" ausgelöst wird und Sie möglicherweise shown.bs.modal verwenden müssen.

Dokumentation zu dieser Veranstaltung:

Dieses Ereignis wird ausgelöst, wenn der Benutzer die Modalität sichtbar gemacht hat (wartet, bis die CSS-Übergänge abgeschlossen sind).

Dies wirkt sich auf @Keith yeohs aus und Sie sollten Timeouts möglichst vermeiden.

Quelle: Offizielle Bootstrap-Dokumentation

12
Meril P

Nur ein wenig für die erste Antwort hinzuzufügen. Dies liegt daran, dass bei Auslösen des Callbacks das DOM im Modal noch nicht vollständig geladen ist. Vielleicht sollten Sie hier einen kleinen Hack ausführen, um die Aktion nach dem Callback für eine Weile zurückzuhalten. Ich hoffe es hilft!

$('#myModal').on('show.bs.modal', function (e) {
    setTimeout(function(){
        // something here
    }, 300);
});
11
Keith Yeoh

Ich denke, es wird besser sein, um "shown.bs.modal" zu verwenden, wird es ausgelöst, wenn Modal bereits geladen ist. Bootstrap modale Ereignisse

$('#myModal').on('shown.bs.modal', function (e) {
    alert('modal is allready shown');
});
7
rborodinov

Wickle es mit ein 

$(window).on('load', function() {
    ...modal callback here.
});
0
CENT1PEDE