Binding event before bootstrap modal show
<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>