Why is Bootstraps "Modal" Plugin callback not firing?

jquery, twitter-bootstrap

Solution

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

Problem

Original source