Call back function in modal of bootstrap3

Question

Im a little bit confuse about firing a call back function in javascript modal of bootstrap3. In normal jquery.post you can do it like,

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

But in bootstrap 3 modal I fires the modal through script and I do it like this base on how I understand the explanation in their website.

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

But sad to say if I click the button, nothing is happening, nothing was logged in the console. How do I call a callback function in a modal of bootstrap 3?

Answer 1

For Bootstrap 3, the events are now namespaced, so the show event for the modal would be show.bs.modal...

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

Demo: http://bootply.com/90952

Answer 2

@Skelly is right, you can use the show.bs.modal event like this:

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

The official documentation says:

This event fires immediately when the show instance method is called.

Please note that this event is fired "quite soon" and you may need to use shown.bs.modal instead.

Documentation about this event:

This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).

This impacts @Keith yeoh's answer and you should avoid timeouts when possible.

Source: Official Bootstrap documentation