javascript - Blade 上的 Laravel 自定义 javascript 不起作用

Question

我遇到这种情况，我想将数据传递到 Bootstrap 4 模式。我有一个记录列表，其中有自己的链接可供编辑和删除。由于我想加载模态确认来删除特定记录，因此我需要传递几个参数，例如销毁路由的ID。

我已经尝试过这个解决方案Laracasts forum 。然而，首先，该脚本不起作用，因为 console.log 不输出任何内容。

注意:我正在使用app.js ，所以可能与这个问题有关，但我还没有找到解决这个问题的提示。

这是我的accounts.blade.php :

@extends('layouts.app')

@section('title','Accounts list')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col">
                <div class="card">
                    <div class="card-header">
                        My accounts
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">Accounts list</h5>
                        <h4><a href="{{ route('accounts.create') }}" class="btn btn-success">Create a new account</a></h4>
                        <hr>
                        <ul>
                            @forelse ($user->accounts as $account)
                                <li>
                                    <a href="{{ route('accounts.show',$account->id) }}" title="Your accounts blah">{{ $account->name }}</a> || <a href="{{ route('accounts.edit', $account->id) }}">Edit</a> |
                                    <button type="button" class="btn btn-outline-danger delete-company"
                                            data-toggle="modal"
                                            data-target="#exampleModal"
                                            data-id="{{$account->id}}"
                                            data-url="{{ route('accounts.destroy',['id'=>$account->id]) }}"
                                            data-name="{{$account->name}}"
                                    >
                                        Delete
                                    </button>

                                    {{--<a href="{{ route('accounts.destroy',$account->id) }}">Delete</a> </li>--}}
                                    {{--read this reference: https://medium.freecodecamp.org/custom-confirm-box-with-bootstrap-4-377aa67723c2--}}
                                    <hr>
                                </li>
                            @empty
                                <li class="card-text text-danger">You do not have an account yet.</li>
                            @endforelse
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{--MODAL delete confirmation modal--}}
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Are you sure to delete the <span id="accountname"></span> account?</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Everything will be removed.
                </div>
                <div class="modal-footer">
                    {{--https://stackoverflow.com/a/33688683/1883256--}}
                    <form id="deleteform" action="" method="POST">
                        @csrf
                        @method('DELETE')
                        {{--
                        {{ csrf_field() }}
                        {{ method_field('DELETE') }}
                        --}}
                        <button type="submit" class="btn btn-outline-danger btn-sm">Yes, delete</button>
                    </form>
                    <button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    {{--Ver: https://laracasts.com/discuss/channels/laravel/how-to-pass-value-to-bootstrap-modal-window?page=1#reply=508543 --}}
    <script>/*NOTHING HERE IS WORKING! WHY???*/
        $(document).ready(function () {
            console.log('testing'); // NOT WORKING!
            // For A Delete Record Popup
            $('.delete-company').click(function () {
                console.log('clicked!'); //NOT WORKING!!!
                var id = $(this).attr('data-id');
                var name = $(this).attr('data-name');
                var url = $(this).attr('data-url');

                $("#accountname").append(name);
                $("#deleteForm", 'input').val(id);
                $("#deleteForm").attr("action", url);
            });
        });
    </script>
@endsection

layouts/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

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

    <title>{{ config('app.name', 'Laravel') }} - @yield('title')</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

    {{--Favicon--}}
    <link rel="shortcut icon" href="{{ asset('img/favicon_io/favicon-16x16.png') }}">
</head>
<body>
    <div id="app">
        @include('layouts.partials._nav')
        <div class="container">
            <main class="py-3">
                {{--Flash messages--}}
                @include('layouts.partials.flashMessages._messages_x')
                @include('layouts.partials.flashMessages._messages')
                @yield('content')
            </main>
        </div>
    </div>
</body>
</html>

至于布局app.blade.php我都尝试过 <script src="{{ asset('js/app.js') }}" defer></script>和<script src="{{ asset('js/app.js') }}"></script>没有 defer但它不起作用。

为什么这个脚本根本不起作用？？？是app.js造成麻烦？我该如何让它发挥作用？

如果我能看到console.log()就好了工作，那就太好了!

Answer 1

用正确的方式做一件事试试这个

layouts/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

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

    <title>{{ config('app.name', 'Laravel') }} - @yield('title')</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

    {{--Favicon--}}
    <link rel="shortcut icon" href="{{ asset('img/favicon_io/favicon-16x16.png') }}">
</head>
<body>
    <div id="app">
        @include('layouts.partials._nav')
        <div class="container">
            <main class="py-3">
                {{--Flash messages--}}
                @include('layouts.partials.flashMessages._messages_x')
                @include('layouts.partials.flashMessages._messages')
                @yield('content')
            </main>
        </div>
    </div>
    @stack('scripts')
</body>
</html>

accounts.blade.php

@extends('layouts.app')

@section('title','Accounts list')

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

@push('scripts')
<script>
    console.log('hello');
</script>
@endpush

您可以阅读 Stack