代码$('body').on('hidden.bs.modal','.modal',function(){....}做什么以及什么时候被调用？

我按照HTML来显示引导模式对话框:

Bootstrap模态对话框代码如下:

  
  

    

      
      

        
Event Details
      
      
 Loading... 
      

       Close
      
    
    
    
  

和另一个代码如下:

  
  

    
Event Details
  
  

    

      

        

        {$eventDetails.event_details.title}
        
        
        

          
 {$eventDetails.event_details.start_time_phrase_stamp}
          
 {$eventDetails.event_details.start_time_phrase}
          {if $eventDetails.event_details.location}
            

                 
              {$eventDetails.event_details.location}
            
          {/if}
          {if $eventDetails.event_details.group_name}
          
Group: {$eventDetails.event_details.group_name}
          {/if}
          
Edit Event
        
        

  Edit Event
  Invite Members
  Delete Event

      
      

        

          
            I am..
            Going
            Maybe
            Not Going
          
        
        
      
    
    

    

      

        

            
Description
            
Feeds
            
Going
            
Maybe
            
Not Going
          
      
    
    


    

    

    

      

          {$eventDetails.event_details.description}
      
    
    

    

    

      

       Work In Progress
       
    
    

    

    

      


        {foreach from=$eventDetails.attending_user item=eachUser key=key}
        

          
 
            {if $eachUser.full_name neq ''}{$eachUser.full_name}{else}{$eachUser.user_name}{/if}
            {$eachUser.group_name} 
        
        {/foreach}

      
    
    

    

    

      


        {foreach from=$eventDetails.mayBeAttending_user item=eachUser key=key}
        

          
 
            {if $eachUser.full_name neq ''}{$eachUser.full_name}{else}{$eachUser.user_name}{/if}
            {$eachUser.group_name} 
        
        {/foreach}

      
    
    
    

    

    

      


        {foreach from=$eventDetails.notComing_user item=eachUser key=key}
        

          
 
            {if $eachUser.full_name neq ''}{$eachUser.full_name}{else}{$eachUser.user_name}{/if}
            {$eachUser.group_name} 
        
        {/foreach}

      
    
    
    
    
    
  
  

    Close
  

现在我的代码中发生的事情是用户点击上面的内容

代码的第一部分打开,然后数据提取正在进行,然后突然第二部分代码,即获取的数据被添加到模态.我不明白这是怎么回事.

正在执行此操作的jQuery如下所示,但是当我调用隐藏事件等时我不明白它在做什么.请通过让我理解下面的代码来清除我的疑惑.

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

});

谢谢.

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