web-dev-qa-db-fra.com

Fonction de rappel en modal de bootstrap3

Je suis un peu confus quant à l'activation d'une fonction de rappel dans javascript modal de bootstrap3. En jquery.post normal, vous pouvez le faire comme, 

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

Mais dans bootstrap 3 modal, je lance le modal par script et je le fais comme cette base sur la façon dont je comprends l'explication sur leur site Web.

$('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");
  });
});

Mais c'est triste à dire si je clique sur le bouton, rien ne se passe, rien n'a été enregistré dans la console. Comment appeler une fonction de rappel dans un modal de bootstrap 3?

jquerycallbacktwitter-bootstrap-3
21
HTTP

Pour Bootstrap 3, les événements sont maintenant namespaced, ainsi l'événement show pour le modal serait show.bs.modal...

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

Démo: http://bootply.com/90952

28
Zim

@Skelly a raison, vous pouvez utiliser l'événement show.bs.modal comme ceci:

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

La documentation officielle dit:

Cet événement se déclenche immédiatement lorsque la méthode show instance est appelée.

Veuillez noter que cet événement est déclenché "très bientôt" et que vous devrez peut-être utiliser shown.bs.modal à la place.

Documentation sur cet événement:

Cet événement est déclenché lorsque le modal a été rendu visible par l'utilisateur (attend que les transitions CSS soient terminées).

Ceci affecte -Keith yeoh answer et vous devriez éviter les délais d'attente lorsque cela est possible.

Source: Documentation officielle de Bootstrap

12
Meril P

Juste un peu à ajouter pour la première réponse, c’est parce que, lorsque le rappel est déclenché, le DOM à l’intérieur du modal n’est pas encore complètement chargé, vous devriez peut-être faire un petit bidouillage pour retenir l’action après le rappel pendant un certain temps. J'espère que ça aide!

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

Je pense que le mieux sera d'utiliser "shown.bs.modal", il est déclenché lorsque modal est déjà chargé. Événements modaux Bootstrap

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

Enveloppez-le avec 

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