i\'m using the modal example from the bootstrap 3 docs. the modal works. however i need to access the show.bs.modal event when it fires. for now i\'m just trying:
use this:
$(document).on('show.bs.modal','#myModal', function () {
alert('hi');
})
Remember to put the script after the call of "js/bootstrap", not before.
In my case, I was missing the .modal-dialog div
Doesn't fire event: shown.bs.modal
<div id="loadingModal" class="modal fade">
<p>Loading...</p>
</div>
Does fire event: shown.bs.modal
<div id="loadingModal" class="modal fade">
<div class="modal-dialog">
<p>Loading...</p>
</div>
</div>
Had the same issue. For me it was that i loaded jquery twice in this order:
When jQuery was loaded the second time it somehow broke the references to bootstrap and the modal opened but the on('shown.bs..') method never fired.
Make sure you put your on('shown.bs.modal')
before instantiating the modal to pop up
$("#myModal").on("shown.bs.modal", function () {
alert('Hi');
});
$("#myModal").modal('show'); //This can also be $("#myModal").modal({ show: true });
or
$("#myModal").on("shown.bs.modal", function () {
alert('Hi');
}).modal('show');
To focus on a field, it is better to use the shown.bs.modal
in stead of show.bs.modal
but maybe for other reasons you want to hide something the the background or set something right before the modal starts showing, use the show.bs.modal
function.
i used jQuery's event delegation /bubbling... that worked for me. See below:
$(document).on('click', '#btnSubmit', function () {
alert('hi loo');
})
very good info too: https://learn.jquery.com/events/event-delegation/