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.
Respuestas:
utilizar esta:
$(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 de aquí viene de<div class="modal fade" id="my-modal-id">
$(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
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.
$(document).on().
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.
show.bs.modal?
.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
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 .
$(document).on('shown.bs.modal','.modal', function () {
/// TODO EVENTS
});
.modallugar de hacer referencia a la identificación de modales fue la solución ... ¡gracias!
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.
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);
})
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>
Recuerde poner el script después de la llamada de "js / bootstrap", no antes.
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.
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
$('#myModal').on('show.bs.modal'...)debe ser después de que se cargue JQuery. ¡Gracias!
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')
})
}
Asegúrese de que realmente usa el modal jquery bootstrap y no otro modal jquery.
Perdí demasiado tiempo en esto ...
Tuve el mismo problema. Para mí fue que cargué jquery dos veces en este orden:
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ó.
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
Usé la delegación / burbujeo de eventos de jQuery ... eso funcionó para mí. Vea abajo:
$(document).on('click', '#btnSubmit', function () {
alert('hi loo');
})
muy buena información también: https://learn.jquery.com/events/event-delegation/
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);
});