jQuery Laravel Blade 使用 $(document).ready 函数

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/36736177/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 17:06:30  来源:igfitidea点击:

Laravel blade use $(document).ready function

jquerylaravel-5.2laravel-blade

提问by Jukka Newkampton

I'm trying to use laravel blade templates including some javascript code into child view.

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

I have my mail app.blade.phpfile, where is placed string of jquery initialization:

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

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

In my subview file settings.blade.phpI want to use some jquery functions:

在我的子视图文件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>

But in browser console I get an error message Uncaught ReferenceError: $ is not definedwhich seems like jquery was loaded AFTERcalling that function in subview file.

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

Adding a row: <script src="/js/jquery.min.js"></script>into settings.blade.phpresolves the problem. But I dont want to add my script files into each of my subview file.

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

So question: how can I load main javascript\jquery files in parent blade file BEFOREloading subview files?

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

回答by Qazi

Please follow this way

请按照这条路

for jquery script file do this

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

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

and do this for content section

并对内容部分执行此操作

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

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

@endsection


Updated

更新



Rather to scripting in content section, it would much better and professional way to create another section for scripting in app.blade.php

而不是在内容部分编写脚本,在app.blade.php 中创建另一个脚本部分会更好更专业

normally I follow this way

通常我遵循这种方式

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

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

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

<html>

so for example your code will look like this

所以例如你的代码看起来像这样

@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

回答by Matt

I had this same problem which seemed more to do with the js files being loaded in with the deferattribute.

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

I was getting the same console warning about $ not being defined.

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

So I tested this notion with...

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

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

Which then worked, so I assume it's to do with defer(using Firefox Developer Edition on Linux Mint).

然后起作用了,所以我认为它与defer(在 Linux Mint 上使用 Firefox Developer Edition)有关。

Anyway, a good reason to put all my scripts into proper js files ;-)

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