Question

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

我有我的邮件 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>

但是在浏览器控制台中我收到一条错误消息未捕获的ReferenceError：$未定义，似乎jquery已加载 AFTER 在子视图文件中调用该函数。

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

所以问题：如何在父级刀片文件 BEFORE 加载子视图文件中加载主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开发人员版）有关。

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

Laravel刀片使用$（document）.ready function

2 个答案: