Javascript Laravel 5 js被app.js阻止

我在

home.blade.php

中使用javascript，它扩展了

layout/app.blade.php

@extend（layout.app）

当我在

home.blade.php

中扩展javascript时，停止工作，所以我将其注释掉

在

app.blade.php

中，然后javascript开始工作。我不确定是什么问题，谁能帮我解决这个问题

home.blade.php

@extends('layouts.app')
@section('content')
<div class="container">
   <div class="row justify-content-center">
      <div class="col-md-8">
         <div class="card">
            @if (Auth::user()->email=='admin@admin.com')
            <div class="card-header">Reports</div>
            <div class="card-body">
               <a href="view-reports">View Report</a><br>
               <a href="create-user">Create User</a>
            </div>
         </div>
         @else
         <div class="card-header">Report Form</div>
         <div class="card-body">
            @if (session('status'))
            <div class="alert alert-success">
               {{ session('status') }}
            </div>
            @endif
            <!-- You are logged in! -->
            @if(session()->has('message'))
            <div class="alert alert-success">
               {{ session()->get('message') }}
            </div>
            @endif
            <form action="store" method="post">
               <input type="hidden" name="name" value="{{Auth::user()->name}}">
               <label for="check_log">Checked Logs </label><br>
               <input type="radio" name="check_log" value="yes"> Yes
               <input type="radio" name="check_log" value="no"> No<br><br>
               <label for="verified_ticket"> Checked and Verified for pending tickets </label><br/>
               <input type="radio" name="verified_ticket" value="yes"> Yes
               <input type="radio" name="verified_ticket" value="no"> No<br><br>
               <label for="ticket_found"> Found any ticket that can be done by you </label><br/>
               <input type="radio" name="ticket_found" value="yes"> Yes
               <input type="radio" name="ticket_found" value="no"> No<br><br>
               <div id="box">
                  <label for="ticket_id"> Tickets done by you (INTERNAL Ticket ID'S) </label><br/>
                  <input type="text" name="ticket_id[]" id="name" class="name"><br/><br>
                  <label for="ticket_details"> what did you do</label><br/>
                  <input style="width: 65%; height: 100px;" type="text" name="ticket_details[]" width="200px" height="100px" value=""><br><br>
                  <label for="time"> Time Taken</label><br/>
                  <input type="text" name="time[]" id="name" class="name"><br/><br>
                  <div id="addmore">
                     <a href="#" id="add">Add More Input Field</a>
                  </div>
                  <br><br>
               </div>
               <label for="other_task"> Other Tasks (Should be specify what did you do and time taken for each task) </label><br/>
               <input style="width: 65%; height: 100px;" type="" name="other_task" value=""><br><br>
               <label for="shift_handoff"> Task/Alert that's needs attention from next shift/Dennis </label><br/>
               <input style="width: 65%; height: 100px;" type="" name="shift_handoff" value=""><br><br>
               <input type="checkbox" name="agree" value="agree"> I Agree<br><br>
               <input type="hidden" name="_token" value="{{csrf_token()}}">
               <input type="submit" name="submit" value="submit">
            </form>
            @endif
         </div>
      </div>
   </div>
</div>
@endsection
@section('javascript')
<script type="text/javascript">
   $(document).ready(function(){

       $('#add').click(function(){
           var inp = $('#box');

           var i = $('input').size() + 1;

           $('<div id="box' + i +'"><label for="ticket_id"> Ticket ID </label><br/><input type="text" name="ticket_id[]" id="name" class="name"><br/><br><label for="ticket_details[]"> what did you do</label><br/><input style="width: 65%; height: 100px;" type="text" name="ticket_details[]" width="200px" height="100px" value=""><br><br><label for="time"> Time Taken</label><br/><input type="text" name="time[]" id="name" class="name"><br><br><img src="Minus.png" width="32" height="32" border="0" align="top" class="add" id="remove" /><br><br> <div id="addmore"><a href="#" id="add">Add More Input Field</a></div><br><br></div>').appendTo(inp);

           i++;

       });



       $('body').on('click','#remove',function(){

           $(this).parent('div').remove();

       });

   });
</script> 
@endsection

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- CSRF Token -->
      <meta name="csrf-token" content="{{ csrf_token() }}">
      <title>{{ config('app.name', 'Daily report') }}</title>
      <!-- Scripts -->
      <script src="{{ asset('js/app.js') }}" defer></script>
      <!-- Fonts -->
      <link rel="dns-prefetch" href="https://fonts.gstatic.com">
      <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">
      <!-- Styles -->
      <link href="{{ asset('css/app.css') }}" rel="stylesheet">
   </head>
   <body>
      <div id="app">
         <nav class="navbar navbar-expand-md navbar-light navbar-laravel">
            <div class="container">
               <a class="navbar-brand" href="{{ url('/') }}">
               {{ config('app.name', 'Laravel') }}
               </a>
               <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
               </button>
               <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <!-- Left Side Of Navbar -->
                  <ul class="navbar-nav mr-auto">
                  </ul>
                  <!-- Right Side Of Navbar -->
                  <ul class="navbar-nav ml-auto">
                     <!-- Authentication Links -->
                     @guest
                     <li><a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a></li>
                     <li><a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a></li>
                     @else
                     <li class="nav-item dropdown">
                        <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                        {{ Auth::user()->name }} <span class="caret"></span>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                           <a class="dropdown-item" href="{{ route('logout') }}"
                              onclick="event.preventDefault();
                              document.getElementById('logout-form').submit();">
                           {{ __('Logout') }}
                           </a>
                           <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                              @csrf
                           </form>
                        </div>
                     </li>
                     @endguest
                  </ul>
               </div>
            </div>
         </nav>
         <main class="py-4">
            @yield('content')
            <script src="{{ asset('js/app.js') }}"></script>
            @yield('javascript')
         </main>
      </div>
   </body>
</html>

@extends（'layouts.app'））
@节（“内容”）
@如果（Auth:：user（）->email=='admin@admin.com')
报告


@否则
报告表
@if（会话（“状态”））
{{session（'status'）}
@恩迪夫
@如果（session（）->has（'message'））
{{session（）->get（'message'）}
@恩迪夫
检查日志

对
否


已检查并验证待处理票据

对
否


找到您可以完成的任何票据

对
否


您完成的票据（内部票据ID）




你做了什么




所用时间







其他任务（应指定您做了什么以及每项任务花费的时间）




需要下一班注意的任务/警报/Dennis




我同意
@恩迪夫
@端部
@节（“javascript”）
$（文档）.ready（函数（）{
$（'#添加'）。单击（函数（）{
var inp=$（'框'）；
变量i=$（'input'）.size（）+1；
$（'Ticket ID


您做了什么


花费的时间






）。附录（inp）；
i++；
});
$（'body'）。在（'click'，'#remove'，function（）上{
$（this.parent（'div'）.remove（）；
});
});
@端部

app.balde.php

@extends('layouts.app')
@section('content')
<div class="container">
   <div class="row justify-content-center">
      <div class="col-md-8">
         <div class="card">
            @if (Auth::user()->email=='admin@admin.com')
            <div class="card-header">Reports</div>
            <div class="card-body">
               <a href="view-reports">View Report</a><br>
               <a href="create-user">Create User</a>
            </div>
         </div>
         @else
         <div class="card-header">Report Form</div>
         <div class="card-body">
            @if (session('status'))
            <div class="alert alert-success">
               {{ session('status') }}
            </div>
            @endif
            <!-- You are logged in! -->
            @if(session()->has('message'))
            <div class="alert alert-success">
               {{ session()->get('message') }}
            </div>
            @endif
            <form action="store" method="post">
               <input type="hidden" name="name" value="{{Auth::user()->name}}">
               <label for="check_log">Checked Logs </label><br>
               <input type="radio" name="check_log" value="yes"> Yes
               <input type="radio" name="check_log" value="no"> No<br><br>
               <label for="verified_ticket"> Checked and Verified for pending tickets </label><br/>
               <input type="radio" name="verified_ticket" value="yes"> Yes
               <input type="radio" name="verified_ticket" value="no"> No<br><br>
               <label for="ticket_found"> Found any ticket that can be done by you </label><br/>
               <input type="radio" name="ticket_found" value="yes"> Yes
               <input type="radio" name="ticket_found" value="no"> No<br><br>
               <div id="box">
                  <label for="ticket_id"> Tickets done by you (INTERNAL Ticket ID'S) </label><br/>
                  <input type="text" name="ticket_id[]" id="name" class="name"><br/><br>
                  <label for="ticket_details"> what did you do</label><br/>
                  <input style="width: 65%; height: 100px;" type="text" name="ticket_details[]" width="200px" height="100px" value=""><br><br>
                  <label for="time"> Time Taken</label><br/>
                  <input type="text" name="time[]" id="name" class="name"><br/><br>
                  <div id="addmore">
                     <a href="#" id="add">Add More Input Field</a>
                  </div>
                  <br><br>
               </div>
               <label for="other_task"> Other Tasks (Should be specify what did you do and time taken for each task) </label><br/>
               <input style="width: 65%; height: 100px;" type="" name="other_task" value=""><br><br>
               <label for="shift_handoff"> Task/Alert that's needs attention from next shift/Dennis </label><br/>
               <input style="width: 65%; height: 100px;" type="" name="shift_handoff" value=""><br><br>
               <input type="checkbox" name="agree" value="agree"> I Agree<br><br>
               <input type="hidden" name="_token" value="{{csrf_token()}}">
               <input type="submit" name="submit" value="submit">
            </form>
            @endif
         </div>
      </div>
   </div>
</div>
@endsection
@section('javascript')
<script type="text/javascript">
   $(document).ready(function(){

       $('#add').click(function(){
           var inp = $('#box');

           var i = $('input').size() + 1;

           $('<div id="box' + i +'"><label for="ticket_id"> Ticket ID </label><br/><input type="text" name="ticket_id[]" id="name" class="name"><br/><br><label for="ticket_details[]"> what did you do</label><br/><input style="width: 65%; height: 100px;" type="text" name="ticket_details[]" width="200px" height="100px" value=""><br><br><label for="time"> Time Taken</label><br/><input type="text" name="time[]" id="name" class="name"><br><br><img src="Minus.png" width="32" height="32" border="0" align="top" class="add" id="remove" /><br><br> <div id="addmore"><a href="#" id="add">Add More Input Field</a></div><br><br></div>').appendTo(inp);

           i++;

       });



       $('body').on('click','#remove',function(){

           $(this).parent('div').remove();

       });

   });
</script> 
@endsection

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- CSRF Token -->
      <meta name="csrf-token" content="{{ csrf_token() }}">
      <title>{{ config('app.name', 'Daily report') }}</title>
      <!-- Scripts -->
      <script src="{{ asset('js/app.js') }}" defer></script>
      <!-- Fonts -->
      <link rel="dns-prefetch" href="https://fonts.gstatic.com">
      <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">
      <!-- Styles -->
      <link href="{{ asset('css/app.css') }}" rel="stylesheet">
   </head>
   <body>
      <div id="app">
         <nav class="navbar navbar-expand-md navbar-light navbar-laravel">
            <div class="container">
               <a class="navbar-brand" href="{{ url('/') }}">
               {{ config('app.name', 'Laravel') }}
               </a>
               <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
               </button>
               <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <!-- Left Side Of Navbar -->
                  <ul class="navbar-nav mr-auto">
                  </ul>
                  <!-- Right Side Of Navbar -->
                  <ul class="navbar-nav ml-auto">
                     <!-- Authentication Links -->
                     @guest
                     <li><a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a></li>
                     <li><a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a></li>
                     @else
                     <li class="nav-item dropdown">
                        <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                        {{ Auth::user()->name }} <span class="caret"></span>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                           <a class="dropdown-item" href="{{ route('logout') }}"
                              onclick="event.preventDefault();
                              document.getElementById('logout-form').submit();">
                           {{ __('Logout') }}
                           </a>
                           <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                              @csrf
                           </form>
                        </div>
                     </li>
                     @endguest
                  </ul>
               </div>
            </div>
         </nav>
         <main class="py-4">
            @yield('content')
            <script src="{{ asset('js/app.js') }}"></script>
            @yield('javascript')
         </main>
      </div>
   </body>
</html>

{{config（'app.name'，'Daily report'）}



@客人


@否则

@csrf

@终客

@产量（‘含量’）
@收益（'javascript'）

请参见

---

要将脚本添加到子视图中，您需要使用堆栈，您的app.blade.php应该如下所示：

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Test') }}</title>

        <!-- Styles -->
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    </head>
    <body>
        <div id="app">
            @yield('content')
        </div>

        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}"></script>
        @yield('javascript');
    </body>
</html>

@extends('layouts.app')

@section('content')
   // some content 
@endsection

@section('javascript')
   // your javascript
@endsection

首先加载布局刀片文件，然后在使用关键字

yield（'xxx'）

查看源代码后：

您正在home.blade.php中加载jquery，这并不理想，如果您想加载jquery，应该将其加载到主blade php文件中。但如果您使用的是laravels default

app.js

文件，实际上不需要加载它。默认的

app.js

文件已经需要以下

require（'./bootstrap'）。如果没有更改，该文件已经包含jquery

try {
    window.$ = window.jQuery = require('jquery');

} catch (e) {}

因此，请检查您的
app.js
是否需要引导文件，并检查您的引导文件是否包含jquery。如果是，您不需要在刀片文件中加载jquery

因此，您应该在主刀片中加载
app.js
文件。在底部按如下方式加载：

      ...
      <script src="{{ asset('js/app.js') }}"></script>
      @yield('javascript')
   </body>
</html>

。。。
@收益（'javascript'）
共享刀片文件？控制台中有错误吗？@Pavel home:124未捕获类型错误：$（…）。大小不是HtmlanchoreElement的函数。（首页：124）在htmlanchoreElement.dispatch（app.js:1）在htmlanchoreElement.g.handle（app.js:1）（匿名）@home:124 dispatch@app.js:1 g.handle@app.js:1导入jquery了吗？另外，我认为你应该显示你的app.js文件。另外，为什么要使用
size
函数？它被弃用了，所以也许你应该试试
length
函数。app.js脚本标签让里面的所有东西运行两次（至少对我来说是这样）。我建立了回购协议来证明这一点。知道为什么吗？@JohnnyBeltran我使用Laravel已经有几个月了，你那边到底发生了什么，你到底想发生什么。我想使用google maps api，但我一直在控制台中看到我已经包含了很多次（但在我的代码中我只包含了一次）。所以，我评论说，几小时后，我发现一切都运行了两次。具体来说，内部的app.blade.php。我在这里问了一个问题，但还没有人回答：