Autofocusing on text box inside a modal dialog in Twitter bootstrap

I stumbled upon a problem today figuring out why .focus event is not working for a textbox inside a modal dialog while using twitter bootstrap until I found that .focus won't work for the elements outside the DOM when the page is first loaded.

The event in the Twitter bootstrap documentation named shown.bs.modal works perfectly well. Here is the sample of suppose I want to autofocus on email text field in the dialog(myModal is the id for the dialog, and exampleInputEmail2 is the id of the textbox


jQuery(document).ready(function(){
$('#myModal').on('shown.bs.modal', function () {
  $('#exampleInputEmail2').focus();
 });
});