Question

我的gemfile中有bootstrap 3.3.1。捆绑安装。

我在视图中有以下内容

    <div class="row text-center">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://apis.google.com/js/platform.js" async defer></script>

        <button type="button" class="btn mybtn-primary" data-toggle="modal" data-target="#myModal">
          Start Practice Group
        </button>

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-sm">
            <div class="modal-content">
              <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="myModalLabel">Select Language</h4>
              </div>

              <div class="modal-body">



                <button type="button" class="btn" data-dismiss="modal">Close</button>



                <button type="button" class="btn" id="submit_form">Submit</button>

                <!--<div class='modal-body1'>-->
                <!--  <h3>Close and open, I will be gone!</h3>-->
                <!--</div>-->

              </div>

              <div class="modal-body2">
                <div id="placeholder-div1">
                </div>                    
              </div>

              <div class="modal-footer">

              </div>


              <script type="text/javascript">  
                var render_button = function() {
                    var data = $('#lang').val() + " " + $('#level').val();
                    console.log(data);
                    gapi.hangout.render('placeholder-div1', {
                      'render': 'createhangout',
                      'initial_apps': [{'app_id' : '1097853', 'start_data' : $('#lang').val() + " " + $('#level').val(), 'app_type' : 'ROOM_APP' }]
                    });
                  }

                $(function(){  
                    $('#submit_form').click(function(){
                      console.log("Submitted");
                      render_button();
                    });

                });
                // $(function(){  
                //       $('#myModal').on('hidden.bs.modal', function (e) {
                //       console.log("Modal hidden");
                //       $("#placeholder-div1").html(" ");
                //     });
                // });
                $(document).ready(function() {
                  console.log("Document Loaded");
                  $('#myModal').on("hidden.bs.modal", function() {
                    console.log("Modal hidden");
                    $(".modal-body1").html("Where did he go?!?!?!");
                  });
                });
                $(document).ready(function() {

                  $('#myModal').on('hidden.bs.modal', function () {
                      alert('hidden event fired!');
                  });

                   $('#myModal').on('shown.bs.modal', function () {
                      alert('show event fired!');
                  });
              });
              </script>

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

    </div>

模态完美地显示和关闭。但以下情况并未触发。

               $('#myModal').on("hidden.bs.modal", function() {
                    console.log("Modal hidden");
                    $(".modal-body1").html("Where did he go?!?!?!");
                  });

以及

alert('hidden event fired!');
alert('show event fired!');

Answer 1

您需要将这些事件绑定到show处理程序。换句话说改变这个：

$('#myModal').on("hidden.bs.modal", function() {
                    console.log("Modal hidden");
                    $(".modal-body1").html("Where did he go?!?!?!");
                  });

到

$('#myModal').on("hidden.bs.modal", function() {
                    console.log("Modal hidden");
                    $(".modal-body1").html("Where did he go?!?!?!");
                  }).modal('show');

Rails4 - 为什么hidden.bs.modal没有开火？

1 个答案: