Question

希望这不是一个愚蠢的问题，但我的想法已经不多了...... 所以我有这个模式：

1.scala.html

<div class="feat" id="cor" data-toggle="tooltip" data-placement="bottom" title="add conference role"><div data-toggle="modal" data-target="#conf-role-menu-modal">Conference Role</div></div>


<div class="modal fade" id="conf-role-menu-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body-conf-role-menu">
          <script type="text/javascript">
            $(function(){
               $(".modal-body-conf-role-menu").load("@routes.Application.areaConferenceRole(id,idenv)");
            });
          </script>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

使用我的模态正文中的脚本，我尝试加载此页面：

2.scala.html

    @(id:String, idenv:String)
    @Main("Add area") {
    <form action="@routes.Application.areaPostConferenceRole(id,idenv)" method="POST">

                        First Name: 
                        <input type="text" name="first_name" id="first" class="form-control">
                        Last Name : 
                        <input name="last_name" class="form-control">


<script type="text/javascript">

$( document ).ready(function() {
// Handler for .ready() called.
     $( "#first" ).focus(function() {
         alert( "Handler for .focus() called." );
     });

  });
    </script>
    </form>
 }

它加载的页面确定。我在模态中看到了...... 问题是我的页面2.scala.html中的脚本无法正常工作。我不明白为什么......如果我从页面外面尝试它们，我会尝试加载到我的模态中......

Answer 1

$（document）.ready（function（）{}）; 永远不会在模态中到达，因为当您加载页面时已经触发了此事件（之后加载模态）。 ..）

尝试直接插入脚本，如下所示：

<script type="text/javascript">
    $( "#first" ).focus(function() {
        alert( "Handler for .focus() called." );
    });
</script>

Answer 2

当弹出引导模式时，

shown.bs.modal事件将触发。这是一个例子。

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Full documentation.
https://getbootstrap.com/docs/4.0/components/modal/

脚本不能在我的bootstrap模式中工作

2 个答案: