javascript - 脚本不会在我的 Bootstrap 模式中工作

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>