脚本在我的引导模式中不起作用答案

【问题标题】：scripts wont work inside my bootstrap modal脚本在我的引导模式中不起作用
【发布时间】：2015-03-23 11:11:20
【问题描述】：

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

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 中的脚本不起作用。我不明白为什么......如果我在我尝试加载到我的模式中的页面之外尝试它们，它们会起作用......

【问题讨论】：

为了更好的实践，实际上通过 http 请求加载的模态内容不应包含任何 javascript。它应该只返回 hmtl 代码。您的主页应该管理该 javascript 逻辑。但是在您当前使用的这种方法中，我想将 "$( document ).ready" 更改为 "$(function() {}) 应该可以解决问题..
$(function() {}) - 我也试过了……不好。你可能一开始是对的。谢谢。

标签： javascript twitter-bootstrap playframework modal-dialog load

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

shown.bs.modal 事件将在引导模式弹出时触发。这是一个例子。

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

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

【讨论】：