What does the code $('body').on('hidden.bs.modal', '.modal', function (){....} do and when does it gets called?
<p>I've following HTML to show the bootstrap modal dialog:</p>

<pre><code>&lt;div class="panel-body" data-toggle="modal" href="ajax_event_detail.php?event_id=512" data-target="#myModal-event" style="cursor: pointer;"&gt;&lt;/div&gt;
</code></pre>

<p>Bootstrap modal dialog code is as below :</p>

<pre><code>&lt;div id="myModal-event" class="modal fade" role="dialog"&gt;
  &lt;!-- &lt;div role="document" class="modal-dialog"&gt; --&gt;
  &lt;div role="document" style="width:600px;position:relative;margin:auto;margin-top:10px;"&gt;
    &lt;div class="modal-content" style="border:0;"&gt;
      &lt;!-- &lt;button aria-label="Close" data-dismiss="modal" class="close" type="button"&gt;&lt;span aria-hidden="true"&gt; x &lt;/span&gt;&lt;/button&gt; --&gt;
      &lt;div class="modal-header"&gt;
        &lt;h4 id="myModalLabel" class="modal-title"&gt;Event Details&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt; Loading... &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
       &lt;button data-dismiss="modal" class="btn btn-default" type="button"&gt;Close&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;    
    &lt;!-- /.modal-content --&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>and another code as follows :</p>

<pre><code>&lt;div class="modal-content"&gt;
  &lt;!-- &lt;button aria-label="Close" data-dismiss="modal" class="close" type="button"&gt;&lt;span aria-hidden="true"&gt;×&lt;/span&gt;&lt;/button&gt; --&gt;
  &lt;div class="modal-header"&gt;
    &lt;h4 id="myModalLabel" class="modal-title"&gt;Event Details&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-6 col-md-6 col-sm-12"&gt;
        &lt;div class="event-title"&gt;
        {$eventDetails.event_details.title}
        &lt;input type="hidden" name="hid_event_id" id="hid_event_id" value="{$eventDetails.event_details.event_id}"&gt;
        &lt;/div&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;img src="{$user_img_url}/time.png" alt=""&gt; {$eventDetails.event_details.start_time_phrase_stamp}&lt;/li&gt;
          &lt;li&gt;&lt;img src="{$user_img_url}/calender.png" alt=""&gt; {$eventDetails.event_details.start_time_phrase}&lt;/li&gt;
          {if $eventDetails.event_details.location}
            &lt;li&gt;
                &lt;a href="javascript:void(0)" onClick="viewLocationOnMap();"&gt; &lt;img src="{$user_img_url}/location.png" alt=""&gt;&lt;/a&gt;
              &lt;a href="javascript:void(0)" onClick="viewLocationOnMap();"&gt;{$eventDetails.event_details.location}&lt;/a&gt;
            &lt;/li&gt;
          {/if}
          {if $eventDetails.event_details.group_name}
          &lt;li&gt;&lt;img src="{$user_img_url}/group_event.png" alt=""&gt;Group: {$eventDetails.event_details.group_name}&lt;/li&gt;
          {/if}
          &lt;li&gt;&lt;button type="button" class="btn btn-info" data-toggle="popover"&gt;Edit Event&lt;/button&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;ul id="popover-content" class="list-group" style="display: none"&gt;
  &lt;a data-toggle="modal" href="ajax_event_detail.php?event_id={$eventDetails.event_details.event_id}" data-target="#myModal-edit-event" style="cursor: pointer;" class="list-group-item"&gt;Edit Event&lt;/a&gt;
  &lt;a href="#" class="list-group-item"&gt;Invite Members&lt;/a&gt;
  &lt;a href="#" class="list-group-item"&gt;Delete Event&lt;/a&gt;
&lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-6 col-md-6 col-sm-12"&gt;
        &lt;div class="form-group" align="right"&gt;
          &lt;select name="user_event_responce" id="user_event_responce" class="form-control" style="width:150px;" &gt;
            &lt;option value="0"&gt;I am..&lt;/option&gt;
            &lt;option value="1" {if $myEventGoingStatus eq 'attending_user'} selected="selected" {/if} &gt;Going&lt;/option&gt;
            &lt;option value="2" {if $myEventGoingStatus eq 'mayBeAttending_user'} selected="selected" {/if} &gt;Maybe&lt;/option&gt;
            &lt;option value="3" {if $myEventGoingStatus eq 'notComing_user'} selected="selected" {/if}&gt;Not Going&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
        &lt;!--
        &lt;div class="form-group" align="right"&gt;
          &lt;select name="event_actions" id="event_actions" class="form-control" style="width:150px;"&gt;
            &lt;option value=""&gt;&lt;/option&gt;
            &lt;option value="edit_event"&gt;Edit Event&lt;/option&gt;
            &lt;option value="invite_members"&gt;Invite members&lt;/option&gt;
            &lt;option value="delete_event"&gt;Delete event&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
        --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;hr&gt;
    &lt;div class="row"&gt;
      &lt;div class="event-menu"&gt;
        &lt;ul class="nav nav-tabs" id="myTab"&gt;
            &lt;li&gt;&lt;a href="#description" data-toggle="tab"&gt;Description&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#feeds" data-toggle="tab"&gt;Feeds&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#going" data-toggle="tab"&gt;Going&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#maybe" data-toggle="tab"&gt;Maybe&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#notgoing" data-toggle="tab"&gt;Not Going&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;hr&gt;

    &lt;div class="tab-content"&gt;
    &lt;div class="tab-pane active" id="description"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt;
          {$eventDetails.event_details.description}
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="tab-pane" id="feeds"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt;
       Work In Progress
       &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="tab-pane" id="going"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt;

        {foreach from=$eventDetails.attending_user item=eachUser key=key}
        &lt;div class="col-md-2 col-sm-2 col-xs-12 no-padding"&gt;
          &lt;div class="block"&gt; &lt;img src="{$eachUser.profile_image}" class="img-event" alt=""&gt;
            &lt;span class="author"&gt;{if $eachUser.full_name neq ''}{$eachUser.full_name}{else}{$eachUser.user_name}{/if}&lt;/span&gt;
            &lt;span class="degree"&gt;{$eachUser.group_name}&lt;/span&gt; &lt;/div&gt;
        &lt;/div&gt;
        {/foreach}

      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="tab-pane" id="maybe"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt;

        {foreach from=$eventDetails.mayBeAttending_user item=eachUser key=key}
        &lt;div class="col-md-2 col-sm-2 col-xs-12 no-padding"&gt;
          &lt;div class="block"&gt; &lt;img src="{$eachUser.profile_image}" class="img-event" alt=""&gt;
            &lt;span class="author"&gt;{if $eachUser.full_name neq ''}{$eachUser.full_name}{else}{$eachUser.user_name}{/if}&lt;/span&gt;
            &lt;span class="degree"&gt;{$eachUser.group_name}&lt;/span&gt; &lt;/div&gt;
        &lt;/div&gt;
        {/foreach}

      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;    

    &lt;div class="tab-pane" id="notgoing"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt;

        {foreach from=$eventDetails.notComing_user item=eachUser key=key}
        &lt;div class="col-md-2 col-sm-2 col-xs-12 no-padding"&gt;
          &lt;div class="block"&gt; &lt;img src="{$eachUser.profile_image}" class="img-event" alt=""&gt;
            &lt;span class="author"&gt;{if $eachUser.full_name neq ''}{$eachUser.full_name}{else}{$eachUser.user_name}{/if}&lt;/span&gt;
            &lt;span class="degree"&gt;{$eachUser.group_name}&lt;/span&gt; &lt;/div&gt;
        &lt;/div&gt;
        {/foreach}

      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;    
    &lt;/div&gt;    
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
    &lt;button data-dismiss="modal" class="btn btn-default" type="button"&gt;Close&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Now what's happening in my code is when user clicks on above</p>

<pre><code>&lt;div class="panel-body" data-toggle="modal" href="ajax_event_detail.php?event_id=512" data-target="#myModal-event" style="cursor: pointer;"&gt;&lt;/div&gt;
</code></pre>

<p>The first part of code opens up, then the data fetch is going on then suddenly the second part of code i.e. the data fetched gets added to the modal. I'm not understanding how this is happening.</p>

<p>The jQuery which is doing this is as follows but I didn't understand what it is doing when that hide event is being called etc. etc. Please clear my doubts by making me understand below code.</p>

<pre><code>$('body').on('hidden.bs.modal', '.modal', function () {
    console.log('Hi *');
    $("#myModal-event .modal-body").html(' Loading... ');
    $(this).removeData('bs.modal');

});
</code></pre>

<p>Thanks.</p>