ブートストラップ崩壊のコールバック関数は動作しません

Question

は、ここに私のコード

<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> 

であると示すかどうか私はcollapse1聞くためにコールバック関数を使用したい、この

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

のようなJSを書きますまたは再生または停止するyoutubeビデオを制御するために隠されています。例： collapse1が表示されたら、ビデオを再生します。それが隠れると、ビデオを止めます。 私は、hiddenのための関数を書いたばかりです。 しかし、問題は、コールバック関数が動作しないことです！ 警告ウィンドウが表示されます。 問題をどのように処理するのですか？

Answer 1

あなたはこのようにではなく、パネル体で、モーダル・ダイアログで "ID = collapse1" を使用する必要があります。

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

Answer 2

が

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

私にこの、hide.bs.collapseの仕事をしてみてください

私はこのバージョンのブートストラップを使用しました

<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>