title: Bootstrap collapse callback function which is inside modal doesn't work
body: <p>Here is my code</p>
  
  <pre><code>&lt;div class="modal fade" id="Art" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
  
      &lt;div class="modal-dialog modal-lg" style="opacity: 0.85;"&gt;
  
          &lt;div class="modal-content" style="background-color: #687077;" &gt;
  
              &lt;div class="modal-header"&gt;
  
                  &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
                  &lt;h4 class="modal-title" id="myModalLabel1"&gt;Art&lt;/h4&gt;
              &lt;/div&gt;
  
              &lt;div class="modal-body"&gt;
                  &lt;div class="panel-group" id="accordion1" &gt;
  
                      &lt;div class="panel panel-default" style="border-width: 3px"&gt;
                          &lt;div class="panel-heading" style="background-color: gray"&gt;
                              &lt;h4 class="panel-title" style="color: black"&gt;
                                  &lt;a data-toggle="collapse" data-parent="#accordion1" href="#collapse1"&gt;Media&lt;/a&gt;
                              &lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div id="collapse1" class="panel-body collapse in"&gt;
                              &lt;div class="panel-body" style="background-color: #687077"&gt;
                                  &lt;div class="table1container" id="yt-player"&gt;
                                      &lt;iframe id="art_video" width="830" height="400" src="https://www.youtube.com/embed/BCkHnvDGWOY?autoplay=1" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="panel panel-default" style="border-width: 3px"&gt;
                          &lt;div class="panel-heading" style="background-color: gray"&gt;
                              &lt;h4 class="panel-title" style="color: black"&gt;
                                  &lt;a data-toggle="collapse" data-parent="#accordion1" href="#collapse2"&gt;Content&lt;/a&gt;
                              &lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div id="collapse2" class="panel-collapse collapse"&gt;
                              &lt;div class="panel-body" style="background-color: #687077"&gt;
                                  &lt;div class="table1container"&gt;
                                      &lt;embed src="move.pdf" width="800px" height="800px" /&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="modal-footer"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and I write js like this</p>
  
  <pre><code>$(document).ready(function() {
      $('#collapse1').on('hidden.bs.modal', function (e) {
          alert("it will not be printed");
      });
  });
  </code></pre>
  
  <p>I want to use callback function to listen collapse1 whether shown or hidden to control youtube video to play or stop.
  e.g. When collapse1 shows, then play video. When it hides, then stop video.
  I just wrote the function for hidden.
  But the problem is, the callback function doesn't work!
  The alert window should appear.
  How to deal with the problem?</p>