Why is Bootstraps "Modal" Plugin callback not firing?

Question

I'm having a problem understanding Bootstraps Modal Callbacks.

The ".on('show',function(){})" portion of the following code is not firing. Not sure why. Please advise. Also, any/all code optimization tips welcome.

The HTML

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

The 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 for displaying 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 have done bins on http://codebins.com/bin/4ldqpa7