title: Binding event before bootstrap modal show
body: <p>I have a simple bootstrap modal</p>
  
  <pre><code>&lt;div id="mymodal" class="modal fade"&gt;
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
          &lt;h3&gt;Modal header&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
      ...
      &lt;div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have attached it with a button using data-toggle</p>
  
  <pre><code>&lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mymodal"&gt; Toggle&lt;/button&gt;
  </code></pre>
  
  <p>Now when the button is clicked the modal will show up. The modal body contains a div which needs to be prepopulated. I used below code to do the same</p>
  
  <pre><code>$('#mymodal').on('shown.bs.modal', function(){
      generate_modal_body();    
  })
  </code></pre>
  
  <p>But above code is not working. Surprisingly, if I add click event on the button on modal, it can trigger the generate_modal_body().
  I have checked similar questions here but could not find satisfactory answer.
  Please let me know if I am missing something obvious.</p>