Laravel blade 使用 $(document).ready 函数

Question

我正在尝试使用 laravel blade 模板，包括一些 javascript 代码到 child 视图中。

我有我的邮件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 在子视图文件中调用该函数。

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

所以问题：如何在 parent blade 文件 加载子视图文件之前 javascript\jquery 加载主要 javascript\jquery 文件？

Answer 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

Answer 2

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

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

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

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

然后起作用了，所以我认为这与 defer（在 Linux Mint 上使用 Firefox Developer Edition）有关。

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

Laravel blade 使用 $(document).ready 函数

Laravel blade use $(document).ready function

jquery

laravel-5.2

laravel-blade