Laravel 刀片使用 $(document).ready 函数答案

【问题标题】：Laravel blade use $(document).ready functionLaravel 刀片使用 $(document).ready 函数
【发布时间】：2016-08-12 16:21:51
【问题描述】：

我正在尝试在子视图中使用包含一些 javascript 代码的 laravel Blade 模板。

我有我的邮件 app.blade.php 文件，其中放置了 jquery 初始化字符串：

<script src="/js/jquery.min.js"></script>

在我的子视图文件 settings.blade.php 我想使用一些 jquery 函数：

@extends('layouts.app')
@section ('content')
Settings main page
@endsection

<script type="text/javascript">
    $(document).ready(function() {
        alert("Settings page was loaded");
    });
</script>

但在浏览器控制台中我收到一条错误消息 Uncaught ReferenceError: $ is not defined 这似乎是 jquery 已加载 AFTER 在子视图文件中调用该函数。

在 settings.blade.php 中添加一行：<script src="/js/jquery.min.js"></script> 可以解决问题。但我不想将我的脚本文件添加到我的每个子视图文件中。

所以问题：如何在父刀片文件中加载主 javascript\jquery 文件在加载子视图文件之前？

【问题讨论】：

请正确的js文件路径，并在加载子视图之前将js文件放在父页面顶部。
js文件路径正确。我的调试器中没有错误。如果在 app.blade.php 中使用了文件，则加载正确，没有任何错误

标签： jquery laravel-5.2 laravel-blade

【解决方案1】：

请往这边走

对于 jquery 脚本文件执行此操作

<script src="{!!url('/js/jquery.min.js')!!}"></script>

并为内容部分执行此操作

@extends('layouts.app')
@section ('content')
Settings main page

<script type="text/javascript">
    $(document).ready(function() {
        alert("Settings page was loaded");
    });
</script>

@endsection

更新

与其在内容部分编写脚本，不如在 app.blade.php

中创建另一个用于编写脚本的部分会更好、更专业

我一般都是这样的

<html>
  <head> 
    @yield('page-style-files')
  </head>

  <body>
    <div class="wrapper">
     @yield('content')
    </div>
  </body>

  @yield('page-js-files')
  @yield('page-js-script')

<html>

例如，您的代码将如下所示

@extends('layouts.app')
@section ('content')
  Settings main page    
@endsection

@section('page-style-files')
 <link href="....css" />
@stop


@section('page-js-files')
 <script src=".....js"></script>
@stop

@section('page-js-script')
<script type="text/javascript">
    $(document).ready(function() {
        alert("Settings page was loaded");
    });
</script>
@stop

【讨论】：

非常感谢。将
@JukkaNewkampton 我更新了我的答案，我提到了我遵循的方式
完美解决方案。我将它应用到我的项目中并且效果很好。不知道@seciton -> @stop 块。非常感谢

【解决方案2】：

我遇到了同样的问题，这似乎与使用 defer 属性加载的 js 文件有关。

我收到了关于 $ 未定义的相同控制台警告。

所以我用...测试了这个概念

<script type="text/javascript">
    setTimeout(function () {
        $(document).ready(function(){
            alert('now');
        });
    }, 5000);
</script>

然后工作，所以我认为它与 defer（在 Linux Mint 上使用 Firefox 开发人员版）有关。

无论如何，将我的所有脚本放入正确的 js 文件中是一个很好的理由 ;-)

【讨论】：