Modal event shown.bs.modal is not fired if a remote URL is provided

Created by: iainheng

Modal event shown.bs.modal is not fired when a remote URL is provided.

I have the modal container in

<div id="variant-modal" class="modal fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>

And a button

<a id="add-variant" class="btn btn-default" data-target="#variant-modal" data-toggle="modal" href="remote.php">Add a variant</a>

and the return data from the remote.php is

<div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">x</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">some simple test</div>
            <div class="modal-footer">
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->

and I listen the shown.bs.modal as below

    $('#variant-modal').on('shown.bs.modal', function () {
        alert("shown");
    });

But the event shown.bs.modal is not fired. It is working fine when there is no remote URL though.

However, I tried event show.bs.modal and it get called everytime even though it load the content from the remote URL.