Question

我是Laravel的新手，让我对如何让它发挥作用感到困惑。

这是我的代码：

app.blade.php（/ views / layouts /）

<head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel</title>
    <link rel="stylesheet" type="text/css" href="/css/app.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-lg-8">
                @yield ('content')
            </div>

            <div class="col-md-4 col-lg-4">
                @include('inc.sidebar')
            </div>
        </div>
    </div>

    <footer class="footer">
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>

    @yield('jQuery')
</body>

home.blade.php（/ views /）

@extends('layouts.app')

@section('content')
<h1>Home</h1>

<section class="controls">
    <button type="button" class="btn btn-success" id="New">New</button>
    <button type="button" class="btn btn-warning" id="Modify">Modify</button>
    <button type="button" class="btn btn-danger" id="Close">Close</button>
</section>  
@endsection

@section('sidebar')
    @parent
    <p>This is the appended to the sidebar.</p>
@endsection

@section('jQuery')
    <script src="{{ asset('js/main.js') }}"></script>
    <script src="{{ asset('js/app.js') }}"></script>
@endsection

main.js（public / js /）

alert('Alert Test');

$(document).ready(function(){
    alert('DocReady');

    $('#New').on('click',function(){
        alert('New');
    });
});

使用上面的代码，我收到的结果是一条警告消息“Alert Test”，一个非工作按钮和一个Uncaught ReferenceError错误：$未在以下位置定义：

$(document).ready(function(){

但我的期望应该是警告信息“警报测试”，“DocReady”以及在没有任何错误或警告的情况下点击警告“新”的按钮。

我试图像这样更改home.blade.php（/ views /）中的代码块

<section class="controls">
    <button type="button" class="btn btn-success" id="New">New</button>
    <button type="button" class="btn btn-warning" id="Modify">Modify</button>
    <button type="button" class="btn btn-danger" id="Close">Close</button>

    <!-- Added Code -->
    <script src="{{ asset('js/main.js') }}"></script>
    <script src="{{ asset('js/app.js') }}"></script>
    <!-- Added Code -->
</section>

结果是“Alert Test”和1“DocReady”的2条警报消息以及单击按钮时仍然显示“New”的警告消息，但仍然存在Uncaught ReferenceError：$仍然存在，这是不需要的，我相信不正确因为我在我的代码中放了重复的脚本。

关于在哪里准确放置那些jQuery代码以及如何正确调用它们的任何建议？谢谢！

添加注意：我还尝试将脚本定期放在app.blade.php（/ views / layouts /）文件的底部，输出是单个警报消息“Alert Test”，并且引用时出错。

Answer 1

我可以看到你在jQuery加载之前加载jQuery别名。您需要在main.js之前加载app.js

@section('jQuery')
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('js/main.js') }}"></script>
@endsection

如何在Laravel上正确使用jQuery？

1 个答案: