Why Bootstraps "Modal" Plugin Callback Does Not Fail?

Question

I have a problem understanding Bootstraps Modal Callbacks .

".on ('show', function () {})" part of the following code does not run. I do not know why. Please advise. In addition, any tips for optimizing your code are welcome.

HTML

<p><a class="bsModal" href="#" title="Bootstrap Modal">testing modal</a></p> 

jQuery

  // Dynamically calling Bootstrap Modal $('.bsModal').click(function(){ var bsModalWindow = '<div class="modal" id="myModal">'; bsModalWindow += '<div class="modal-header">'; bsModalWindow += '<button type="button" class="close" data-dismiss="modal">×</button>'; bsModalWindow += '<h3>Modal header</h3>'; bsModalWindow += '</div>'; bsModalWindow += '<div class="modal-body">'; bsModalWindow += '<p>This is an example of the Bootstrap jQuery Plugin: Modal.</p>'; bsModalWindow += '</div>'; bsModalWindow += '<div class="modal-footer">'; bsModalWindow += '<a href="#" class="btn" data-dismiss="modal">Close</a>'; bsModalWindow += '<a href="#" class="btn btn-primary">Save changes</a>'; bsModalWindow += '</div>'; bsModalWindow += '</div>'; $(bsModalWindow).modal() .on('show', function() { console.log('Modal will be shown'); }) .on('shown', function() { console.log('Modal was shown'); }) .on('hide', function() { console.log('Modal will be hidden'); }) .on('hidden', function() { console.log('Modal is hidden'); }) .show({ backdrop: true, keyboard:true }); }); 

Answer 1

Here is your solution to display a dynamic bootstrap model and call its callback function.

HTML:

 <div id="panel"> <div class="divbutton"> <a href="#myModal" class="btn btn-primary btn-large bsModal"> Launch Demo Modal </a> </div> </div> 

JQuery

 $(function() { var bsModalWindow = '<div class="modal hidden fade" id="myModal">'; bsModalWindow += '<div class="modal-header">'; bsModalWindow += '<button type="button" class="close" data-dismiss="modal">Ã </button>'; bsModalWindow += '<h3>Modal header</h3>'; bsModalWindow += '</div>'; bsModalWindow += '<div class="modal-body">'; bsModalWindow += '<p>This is an example of the Bootstrap jQuery Plugin: Modal.</p>'; bsModalWindow += '</div>'; bsModalWindow += '<div class="modal-footer">'; bsModalWindow += '<a href="#" class="btn" data-dismiss="modal">Close</a>'; bsModalWindow += '<a href="#" class="btn btn-primary">Save changes</a>'; bsModalWindow += '</div>'; bsModalWindow += '</div>'; //Append Model Div before button div on html page $(".divbutton").before(bsModalWindow); $(".bsModal").click(function() { //Bind Callback functions with model events $("#myModal").on('show', function() { //Change Top position of modal on show call back $("#myModal").css('top', '100%'); console.log('Modal will be shown'); }).on('shown', function() { console.log('Modal was shown'); }).on('hide', function() { console.log('Modal will be hidden'); }).on('hidden', function() { console.log('Modal is hidden'); }).show({ backdrop: true, keyboard: true }); //Show Modal $("#myModal").modal('show'); }); }); 

I made bunkers at http://codebins.com/bin/4ldqpa7