Bootstrap Zusammenbruch Callback-Funktion, die innerhalb modal ist nicht funktioniert

Question

Hier ist mein Code

<div class="modal fade" id="Art" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 

    <div class="modal-dialog modal-lg" style="opacity: 0.85;"> 

     <div class="modal-content" style="background-color: #687077;" > 

      <div class="modal-header"> 

       <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
       <h4 class="modal-title" id="myModalLabel1">Art</h4> 
      </div> 

      <div class="modal-body"> 
       <div class="panel-group" id="accordion1" > 

        <div class="panel panel-default" style="border-width: 3px"> 
         <div class="panel-heading" style="background-color: gray"> 
          <h4 class="panel-title" style="color: black"> 
           <a data-toggle="collapse" data-parent="#accordion1" href="#collapse1">Media</a> 
          </h4> 
         </div> 
         <div id="collapse1" class="panel-body collapse in"> 
          <div class="panel-body" style="background-color: #687077"> 
           <div class="table1container" id="yt-player"> 
            <iframe id="art_video" width="830" height="400" src="https://www.youtube.com/embed/BCkHnvDGWOY?autoplay=1" frameborder="0" allowfullscreen></iframe> 
           </div> 
          </div> 
         </div> 
        </div> 

        <div class="panel panel-default" style="border-width: 3px"> 
         <div class="panel-heading" style="background-color: gray"> 
          <h4 class="panel-title" style="color: black"> 
           <a data-toggle="collapse" data-parent="#accordion1" href="#collapse2">Content</a> 
          </h4> 
         </div> 
         <div id="collapse2" class="panel-collapse collapse"> 
          <div class="panel-body" style="background-color: #687077"> 
           <div class="table1container"> 
            <embed src="move.pdf" width="800px" height="800px" /> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 

      <div class="modal-footer"> 

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

und ich schreibe js ähnliche

$(document).ready(function() { 
    $('#collapse1').on('hidden.bs.modal', function (e) { 
     alert("it will not be printed"); 
    }); 
}); 

ich Callback-Funktion verwenden möchten collapse1 zu hören, ob gezeigt oder versteckt, um Youtube-Video zu steuern, um zu spielen oder zu stoppen. z.B. Wenn collapse1 angezeigt wird, dann Video abspielen. Wenn es sich versteckt, dann stoppe das Video. Ich habe gerade die Funktion für versteckt geschrieben. Aber das Problem ist, die Callback-Funktion funktioniert nicht! Das Warnfenster sollte angezeigt werden. Wie man mit dem Problem umgeht?

Answer 1

Sie sollten "id = collapse1" in Modal-Dialog, nicht in das Panel-Körper, wie folgt verwenden:

<div id="collapse1" class="modal-dialog modal-lg" style="opacity: 0.85;"> 

Answer 2

diese versuchen, auf mich hide.bs.collapse Arbeit

$(document).ready(function() { 
    $("#collapse1").on("hide.bs.collapse", function(){ 
     alert("it will not be printed"); 
     }); 
}); 

Ich habe diese Version von Bootstrap

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>