代码$（'body'）。on（'hidden.bs.modal'，'.modal'，function（）{...}的作用是什么，何时被调用？

Question

我遵循HTML来显示引导程序模式对话框：

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

Bootstrap模态对话框代码如下：

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

和另一个代码如下：

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

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

    <div class="tab-pane" id="feeds">
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">
       Work In Progress
       </div>
    </div>
    </div>

    <div class="tab-pane" id="going">
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">

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

      </div>
    </div>
    </div>

    <div class="tab-pane" id="maybe">
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">

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

      </div>
    </div>
    </div>    

    <div class="tab-pane" id="notgoing">
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">

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

      </div>
    </div>
    </div>    
    </div>    
  </div>
  <div class="modal-footer">
    <button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
  </div>
</div>

现在我的代码中发生的是当用户单击上方时

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

代码的第一部分打开，然后继续进行数据提取，然后突然将代码的第二部分即提取的数据添加到模态中。我不知道这是怎么回事。

执行此操作的jQuery如下，但是当调用hide事件等时，我不明白它在做什么。等。请通过使我理解以下代码来消除我的疑问。

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

});

谢谢。

Answer 1

[.modal（模式窗口）关闭时执行。因此，每当您打开带有类modal的模态窗口时（很明显），它有时都会关闭。当该模式窗口被隐藏（或关闭）时，事件hidden.bs.modal被触发并执行该函数。

这不是由用户管理的（您没有编写显式代码），但是Bootstrap库内置了它。

从Bootstrap Documentation：

[hidden.bs.modal：当模态完成向用户隐藏时将触发此事件（将等待CSS转换完成）​​。

示例代码：

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something when this modal window is closed...
});

要回答评论中的查询，您需要：

• [$("#myModal-event .modal-body").html(' Loading... ');设置模式窗口的内容为Loading...。
• $(this).removeData('bs.modal');-这告诉Bootstrap在模式窗口关闭时清除所有内容，这样您就不会得到缓存的内容。在Clear Bootstrap Modal content after close.中查看更多信息>