jQuery 脚本仅在它位于函数之上时才有效

Posted 2023-03-14

【中文标题】jQuery 脚本仅在它位于函数之上时才有效

【英文标题】：jQuery script only working if it's above a function

【发布时间】：2016-02-01 17:41:24

【问题描述】：

我使用 Bootstrap 作为我的模板，并使用 Laravel 作为我的框架。按照示例中的建议，您应该在页面底部加载 jQuery 脚本 - 以加快加载速度。

在我的应用程序中，我有这个函数来检查会话中是否存在警报，如果存在，则显示它：

$(document).ready(function() 
    toastr.options = 
        "closeButton": false
    ;
    toastr. 
        
            Session::get('flash_notification.level')
        
    (' Session::get('
        flash_notification.message ') ')
);

上面显示了我加载 jQuery 脚本的位置：

@if (Session::has('flash_notification.message'))

    <script>

    The above script is loaded here.

    </script>

@endif

    @yield('content')

</div>

<!-- Scripts -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

为了让它工作，我需要在模板的标题中声明我的 jQuery 文件，但我知道这不是最佳实践。我最初以为通过使用$(document).ready() 方法可以解决此问题，但事实并非如此。

任何帮助将不胜感激。

【参考方案1】：

最好将脚本调用放在页脚中，以便最后加载。这意味着您编写的任何其他 JS 都需要在它们之下。您可以将其他 JS 添加到 jQuery 加载后包含的另一个文件中。

如果不能，您可以将其添加到标题中并将defer 属性添加到script 标记以延迟加载。

不过应该​​首选选项 1。