代码$('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如下所示,但是当我调用隐藏事件等时我不明白它在做什么.请通过让我理解下面的代码来清除我的疑惑.

$('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文档:

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内容.