twitter-bootstrap 代码 $('body').on('hidden.bs.modal', '.modal', function (){....} 做了什么，什么时候调用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34612500/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does the code $('body').on('hidden.bs.modal', '.modal', function (){....} do and when does it gets called?
提问by PHPFan
I've following HTML to show the bootstrap modal dialog:
我已经按照 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 modal dialog code is as below :
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>
and another code as follows :
另一个代码如下：
<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>
Now what's happening in my code is when user clicks on above
现在我的代码中发生的事情是当用户点击上面的
<div class="panel-body" data-toggle="modal" href="ajax_event_detail.php?event_id=512" data-target="#myModal-event" style="cursor: pointer;"></div>
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.
代码的第一部分打开，然后数据获取正在进行，然后突然第二部分代码，即获取的数据被添加到模态中。我不明白这是怎么发生的。
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.
正在执行此操作的 jQuery 如下，但我不明白在调用隐藏事件时它在做什么等等。请让我理解下面的代码以消除我的疑虑。
$('body').on('hidden.bs.modal', '.modal', function () {
console.log('Hi *');
$("#myModal-event .modal-body").html(' Loading... ');
$(this).removeData('bs.modal');
});
Thanks.
谢谢。
回答by Praveen Kumar Purushothaman
This executes when the .modal(modal window) gets closed. So, whenever you open a modal window with the class modal(obviously), at some point it gets closed. When that modal window gets hidden (or closed) the event hidden.bs.modalgets triggered and the function gets executed.
这在.modal（模态窗口）关闭时执行。因此，每当您使用该类打开模态窗口时modal（显然），它都会在某个时候关闭。当该模态窗口被隐藏（或关闭）时，事件hidden.bs.modal被触发并执行函数。
This is not managed by the user (you didn't write explicit code) but the Bootstrap library has it built in.
这不是由用户管理的（您没有编写显式代码），但是 Bootstrap 库内置了它。
From the Bootstrap Documentation:
来自Bootstrap 文档：
hidden.bs.modal:This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
hidden.bs.modal：当模态完成对用户隐藏时触发此事件（将等待 CSS 转换完成）。
Sample Code:
示例代码：
$('#myModal').on('hidden.bs.modal', function (e) {
// do something when this modal window is closed...
});
To answer the queries in the comments, you have:
要回答评论中的查询，您需要：
$("#myModal-event .modal-body").html(' Loading... ');sets the content of the modal window to beLoading....$(this).removeData('bs.modal');- This tells Bootstrap to clear everything on the close of the modal window, so you won't get cached content. See more at Clear Bootstrap Modal content after close.
$("#myModal-event .modal-body").html(' Loading... ');将模态窗口的内容设置为Loading....$(this).removeData('bs.modal');- 这告诉 Bootstrap 在模式窗口关闭时清除所有内容，这样您就不会获得缓存的内容。关闭后在Clear Bootstrap Modal 内容中查看更多信息。
