"On shown" event when manually use bootstrap modal

Question

Problem appears when I try to show modal for the first time. Modal is shown but the shown event is fired when I drag the modal or click on the close button (I see the alert). I am using Bootstrap 2.3.2 with Firefox 26.0.

$("#modalXML").modal({ show: false });
$(document).on("click", "#idStart", function(){
    $("#modalXML").modal('show');
});

$("#modalXML").on("shown", function(){
   alert('juhu');
});

<a target="_blank" data-toggle="modal" href="#" class="clsXML" id="idStart" >Button</a>


<div id="modalXML" class="modal hide fade in">
    <div class="modal-header" id="">  
        <a class="close" data-dismiss="modal">×</a>  
        <h3>XML file</h3>  
    </div>  
    <div class="modal-body" id="idModalBodyXML">
        <textarea rows="10" cols="150" id="xmlTextArea">
        </textarea> 
    </div>
    <div class="modal-footer">  
        <button name="button" value="" data-dismiss="modal" class="btn">Close</button>
    </div>  
</div>

Answer 1

OK, I found where is a problem. Instead of

     <div id="modalXML" class="modal hide fade in">

I set (without "in")

   <div id="modalXML" class="modal hide fade">

Now, "on shown" event works.

Thank you all.

Answer 2

It works here in this example:

The following line of code $("#modalXML").modal({ show: false }); was not hiding your modal during my experimentation. $("#modalXML").hide(); worked well though.. Take a look at the example hopefully it will help you.

$("#myModal").hide();
    $(document).on("click", "#launch", function(){
        $("#myModal").modal('show');
    });
    $("#myModal").on("shown", function(){
       alert('juhu');
    });

Example:

http://www.bootply.com/109094