Uncaught ReferenceError: $ is not defined in Laravel 5.5 app

Question

我的 Laravel 5.5 应用程序有一个主布局模板，它通过 CDN 加载 jQuery 3.2.1（成功）。我检查了我的开发人员 'network' 选项卡以确保 jQuery 加载正常。（这是因为我可以看到一个 200 的 HTTP 状态码）

<html>
    <head>
        <title>My app - @yield('title')</title>
    </head>

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

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
        </script>
    </body>
</html>

在扩展我的布局模板的模板中，我尝试编写一些 jQuery 来简单地提交表单。

@extends('layouts.app')

@section('content')
    <form id="my-form" action="{{ route('item.store') }}">
        <input type="text" name="name" />
        <button id="my-submit-button" type="submit">Add</button>
    </form>

    <script>
        $(document).ready(function() {
            $("#my-form").submit(function(event) {
                event.preventDefault();
            });

            $("#my-submit-button").click(function() {
                axios.post('/items', {
                    name: 'item-name',
                })
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
            });
        });
    </script>
@endsection

问题是：我一直看到："Uncaught ReferenceError: $ is not defined"。我究竟做错了什么？

谢谢！

Answer 1

发生这种情况是因为在使用脚本标记加载 jQuery 库之前，您使用 @yield('content') 将代码加载到布局模板中。将 html 更改为将 jquery link 放在将要使用它的代码上方的 head 标记中。

<html> <head> <title>My app - @yield('title')</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> </head> <body> <div class="container"> @yield('content') </div> </body>

Uncaught ReferenceError: $ is not defined in Laravel 5.5 app

Uncaught ReferenceError: $ is not defined in Laravel 5.5 app

jquery

laravel-5.5