El evento bootstrap jquery show.bs.modal no se disparará

82

Estoy usando el ejemplo modal de los documentos de bootstrap 3. el modal funciona. sin embargo, necesito acceder al evento show.bs.modal cuando se activa. por ahora solo estoy intentando:

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

No pasa nada, el evento no dispara. ¿¿¿Qué estoy haciendo mal??? Esto no tiene sentido para mi.

modal-dialog twitter-bootstrap-3 jquery m4rlo
fuente

Respuestas:

102

utilizar esta:

$(document).on('show.bs.modal','#myModal', function () {
  alert('hi');
})
Ali
fuente
8
Esto resolvió mi problema. Pero lo coloqué fuera de la función document.ready. Cuando coloqué dentro de document.ready, no estaba funcionando. Podría ayudar a alguien.
Harish Chinju
2
Esta debería ser la respuesta aceptada, ya que funciona perfectamente con modales ajax creados dinámicamente a través de $(data).modal('show');.
kjdion84
2
Esto se dispararía para cada modal que tenga en el documento. Para apuntar solo a un modal específico, puede usar $(document).on('hidden.bs.modal', function (e) { if (e.target.id === 'my-modal-id') { alert('hi'); } });. Id de aquí viene de<div class="modal fade" id="my-modal-id">
przno
2
@przno No, no lo haría, el segundo argumento es el selector que especifica el elemento.
Tom
Cuando lo usa $(document).on(..., adjunta su oyente al contexto del documento , y no importa si su elemento objetivo existe o no. Debe agregar el nombre del evento como primer argumento y la fanction de devolución de llamada como último, pero puede agregar un selector de consulta como segundo argumento
Ali
81

Asegúrese de poner su on('shown.bs.modal')antes de instanciar el modal para que aparezca

$("#myModal").on("shown.bs.modal", function () { 
    alert('Hi');
});
$("#myModal").modal('show'); //This can also be $("#myModal").modal({ show: true });

o

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

Para enfocarse en un campo, es mejor usar el shown.bs.modalen lugar de, show.bs.modalpero tal vez por otras razones desea ocultar algo del fondo o establecer algo justo antes de que el modal comience a mostrarse, use la show.bs.modalfunción.

Pierre
fuente
@ kjdion84: allí donde los crea, debe vincular los eventos. `var amodal = $ (" <div modal ... /> "); amodal.on (..., myfunc) .modal ('mostrar');
Pierre
No tiene que vincular ningún evento si usa $(document).on().
kjdion84
2
^ Esto resuelve mi problema. Además, show.bs.modales diferente de shown.bs.modal. El primero se dispara cuando el modal está a punto de aparecer. Esto último cuando se haya mostrado. Muy diferente.
Yukio Fukuzawa
@Pierre ¿cuál es el significado de show.bs.modal?
KUMAR
@KUMAR es el evento que bootstrap llama cuando llama .modal('show'). Hay cuatro eventos exige modales: [ show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal] - espectáculo es cuando se va a mostrar, que se muestra cuando se está mostrando, el mismo para ocultar y oculto. getbootstrap.com/docs/3.4/javascript/#modals-events
Pierre
18

Envolver su función en $(document).ready(function() {, o más simplemente, $(function() {. En CoffeeScript, esto se vería así

$ ->
  $('#myModal').on 'show.bs.modal', (event)->

Sin él, JavaScript se ejecuta antes de que se cargue el documento y aún #myModalno forma parte del DOM. Aquí está la referencia de Bootstrap .

Chloe
fuente
12 
$(document).on('shown.bs.modal','.modal', function () {

/// TODO EVENTS

});
Zeekoi Inc.
fuente
2
de alguna manera, esta fue la respuesta más útil para mí. parece que trabajar con en .modallugar de hacer referencia a la identificación de modales fue la solución ... ¡gracias!
mabu
Esta es la mejor respuesta, ya que no es específica y se activará en cualquier modal que se muestre en lugar de cuando solo se active un modal establecido.
IDED
9

Prueba esto

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

Utilizando en shownlugar de showtambién asegúrese de tener sus puntos y coma al final de su función y alerta.

Trevor
fuente
7
Tanto 'show.bs.modal' como 'shown.bs.modal' deberían funcionar para mis propósitos, ambos están listados como eventos válidos en los documentos de arranque. todavía no funciona.
m4rlo
1
¿Ha verificado que su jQuery está funcionando, por ejemplo, $ (documento). Listo (función () {alerta ('prueba');});
Trevor
sí, si pongo una alerta fuera del evento del espectáculo, solo dentro de document.ready, se dispara.
m4rlo
1
@BassJobsen Hace referencia a application.js dos veces en su html, uno de ellos carga el archivo correcto. El otro no se encuentra .. ¿Eso causaría el problema?
Trevor
1
Gracias @Trevor. También funcionó para mí. Estaba incluyendo 2 jquery.js. :-p
Akshay Vishnoi
7

Agrega esto:

$(document).ready(function(){
    $(document).on('shown.bs.modal','.modal', function () {
         // DO EVENTS
    });
});
zaarour
fuente
6

Me pasó algo similar y lo resolví usando setTimeout.

Bootstrap está usando el siguiente tiempo de espera para completar la visualización:

c.TRANSITION_DURATION = 300, c.BACKDROP_TRANSITION_DURATION = 150,

Entonces, usar más de 300 debe funcionar y para mí 200 está funcionando:

$('#myModal').on('show.bs.modal', function (e) {
    setTimeout(function(){
        //Do something if necessary
    }, 300);                        
})
itsazzad
fuente
1
¡Esto es lo que he estado buscando! ¡Gracias por señalar la duración de la transición del bootstrap! Felicitaciones: D Incluso 150 también funciona :)
ShellZero
4

En mi caso, me faltaba el div .modal-dialog

No dispara evento: shown.bs.modal

<div id="loadingModal" class="modal fade">
  <p>Loading...</p>
</div>

¿Incendio evento: shown.bs.modal

<div id="loadingModal" class="modal fade">
  <div class="modal-dialog">      
    <p>Loading...</p>
  </div>
</div>
aeroson
fuente
3

Tuve un problema similar pero diferente y todavía no puedo trabajar cuando uso $ ('# myModal'). Pude hacerlo funcionar cuando uso $ (ventana).

Mi otro problema es que descubrí que el evento show no se dispararía si almacenaba mi contenido modal div html en una variable de javascript como. 

var content="<div id='myModal' ...";
$(content).modal();
$(window).on('show.bs.modal', function (e) {
  alert('show test');
});

el evento nunca se disparó porque no ocurrió

mi solución fue incluir los divs en el cuerpo html

<body>
    <div id='myModal'>
       ...
    </div>
    <script>
        $('#myModal).modal();
        $(window).on('show.bs.modal', function (e) {
            alert('show test');
        });
    </script>
</body>
wjfinder77
fuente
3

Recuerde poner el script después de la llamada de "js / bootstrap", no antes.

Iúri Batista Teles
fuente
2

Asegúrese de que está cargando jQuery antes de usar Bootstrap. Suena básico, pero tenía problemas para capturar estos eventos modales y resulta que el error no estaba en mi código, sino que estaba cargando Bootstrap antes de jQuery.

tamano de viaje
fuente
2

A veces, esto no funciona si:

1) tiene un error en el código del script java antes de su línea con $('#myModal').on('show.bs.modal'...) . Para solucionar problemas, coloque un mensaje de alerta antes de la línea para ver si aparece cuando carga la página. Para resolver, elimine los JS anteriores para ver cuál es el problema

2) Otro problema es si carga el JS en el orden incorrecto. Por ejemplo, puede tener la $('#myModal').on('show.bs.modal'...)parte antes de cargar JQuery.js. En ese caso, su llamada será ignorada, así que primero en el HTML (vea la fuente de la página para estar seguro) verifique si el enlace del script a JQuery está por encima de su onShowllamada modal , de lo contrario será ignorado. Para solucionar problemas, ponga una alerta dentro del programa antes de. Si ve el anterior y no el que está dentro de la función onShow, está claro que la función no se puede ejecutar. Si la ortografía es correcta, lo más probable es que su llamada a JQuery.js no se realice o se realice después de la onShowparte

Marius
fuente
Esto me ayudó, $('#myModal').on('show.bs.modal'...)debe ser después de que se cargue JQuery. ¡Gracias!
Ian Wold
2

Tuve el mismo problema con bootstrap4. La solución fue agregarlo dentro de la función jQuery document ready ():

$(document).ready(function() {
    $('#myModal').on('show.bs.modal', function () {
       alert('hi')
    })
}
Yuri Natividade
fuente
1

Asegúrese de que realmente usa el modal jquery bootstrap y no otro modal jquery.

Perdí demasiado tiempo en esto ...

Didier Kernwein
fuente
1

Tuve el mismo problema. Para mí fue que cargué jquery dos veces en este orden:

  1. JQuery cargado
  2. Bootstrap cargado
  3. Cargado jQuery de nuevo

Cuando se cargó jQuery por segunda vez, de alguna manera rompió las referencias a bootstrap y el modal se abrió, pero el método on ('shown.bs ..') nunca se disparó.

d00d
fuente
0

En mi caso el problema era cómo comentaba travelsize .. El orden de las importaciones entre bootstrap.js y jquery. Porque estoy usando la plantilla Metronic y no verifico antes

Gregorio Centurión
fuente
0

Esto sucede cuando es posible que el código se haya ejecutado antes y no aparece, por lo que puede agregar timeout () para que tp fire.

$(document).on('shown.bs.modal', function (event) {
      setTimeout(function(){
        alert("Hi");
      },1000); 
    });
Suraj Gupta
fuente
-1

A continuación se muestran los detalles granulares:

show.bs.modal funciona mientras que la carga del cuadro de diálogo del modelo shown.bs.modal funcionó para hacer cualquier cosa después de la carga. post renderizado

Anand
fuente