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

scripts wont work inside my bootstrap modal

本文关键字：模式 不起作用 我的 脚本      更新时间：2023-09-26

希望这不是一个愚蠢的问题，但我的想法快用完了。。。所以我有这个模式：

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中的脚本无法工作。我不明白为什么。。。如果我从我试图加载到模态中的页面外部尝试它们，它们就会起作用。。。。

$（document）.ready（function（）｛｝）将永远无法在模态内部访问，因为当您加载页面时已经触发了此事件（在此之后加载模态…）

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

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

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

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})
Full documentation.
https://getbootstrap.com/docs/4.0/components/modal/
相关文章：