title: IE hates my modal window events
body: <p>I am building a website and am using Twitter Bootstrap modal.js as part of my project. And as usual, IE is causing some trouble.</p>
  
  <p>I have a few buttons, that when clicked each fetches a different form through ajax, fills the modal with the form, and brings it up. Since they are being fetched dynamically I need to update some of the fields with additional scripts (jQuery UI datepicker for example) after the modal is being fetched. Immediately after the ajax call does not work so I need to use the modal events.</p>
  
  <p>This works on chrome:</p>
  
  <pre><code>$('#myModal').modal().on('shown', function() {
      $('#id_date').datepicker();
  });
  </code></pre>
  
  <p>However, IE does something weird. For it to work I had to bind the listener to the 'show' event ('shown' doesn't work) and to the document instead of the modal.</p>
  
  <p>Inside a document.ready: </p>
  
  <pre><code>$(document).on('show', function() {
      $('#id_date').datepicker();
  });
  </code></pre>
  
  <p>After clicking a button:</p>
  
  <pre><code>$('#myModal').modal('show'); 
  </code></pre>
  
  <p>But here's the kicker - this doesn't work either <strong>unless</strong> I add an <code>alert('hello');</code> above the <code>.datepicker()</code>. Why does alert change anything? I don't know, but then it also stacks up - every time you click on one of the buttons you get more alerts, i.e. the first time one alert, the second time two alerts and so on.</p>
  
  <p>I am using bootstrap 2.2 and IE8 (standards mode, there's also a meta to make sure the page is rendered as IE8 and not an older version). I have no idea what's the problem here, please help!</p>
  
  <p><strong>Update</strong></p>
  
  <p>So I narrowed it down a little. This isn't anything to do with the 'shown' or 'show' events or what it is binded for. It's a lot weirder. This is what I ended up doing:</p>
  
  <pre><code>$('#myModal').on('shown', function() {
       if (navigator.appName == 'Microsoft Internet Explorer') {
           alert('Hey! you should really use Chrome!');
       }
       $('#id_date').datepicker();
       $('#id_tags').chosen(); 
  });
  
  
  $('#button1').on('click', function() {
       $('#myModal').modal();
  });
  </code></pre>
  
  <p>Without the alert message, IE doesn't run the datepicker and chosen code that comes immediately afterward. <em>why would a simple alert have such an impact?</em></p>