Ajax称问题

Question

I have 2 ajax calls, 1 for create and 1 for delete a folder, here is the source code

<!-- Create folder ajax -->
<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('input[name="_token"]').val()
            }
        });

        $('#create-folder').click(function(e) {
            e.preventDefault();

           $.ajax({
               data: $('#create-folder-form').serialize(),
               url: "{{ route('folders.store') }}",
               type: "POST",
               dataType: "json",

               success: function (data) {

                   if(data.errors) {
                       alert('Sorry');
                   } else {
                       $('#create-folder-form').trigger("reset");
                       $('#exampleModal').modal('hide');

                       $('.folders').append('<li data-id=' + data.id + '>' + data.name + " <button type='button' class='btn btn-danger delete-folder' data-toggle='modal' data-id='" + data.id + "'> Delete " +  "</button>" + '</li>');
                   }

               },

               error: function (data) {
                    console.log('Error ' + data);
               }
           })
        });

        // Delete ajax call
        $('.delete-folder').click(function(e) {

            let id = ($(this).data('id'));

            $.ajax({
                type: 'delete',
                url: "folders/" + id,

                success: function(data) {
                    $('.folders li[data-id=' + data.id + ']').remove();
                }

            });

        });
    });
</script>

index.blade.php

@extends('layouts.app')

@section('content')
    <div class="container">

        @include('partials.nav')

        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Folders</div>

                    <div class="card-body">
                        <!-- Button trigger modal -->
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                            Create folder
                        </button>

                        <!-- 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">Create</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <form id="create-folder-form">
                                            @csrf

                                            <div class="form-group">
                                                <label for="name">Name</label>
                                                <input type="text" class="form-control" name="name" id="name">
                                            </div>

                                            <div class="form-group">
                                                <button type="button" class="btn btn-primary" id="create-folder">Create</button>
                                            </div>

                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row justify-content-center mt-3">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Folders</div>
                    <div class="card-body">
                        @if($folders)
                            <ul class="folders">
                                @foreach($folders as $folder)
                                    <li data-id="{{ $folder->id }}">
                                        {{ $folder->name }}

                                        <button type='button' class='btn btn-danger delete-folder' data-toggle='modal' data-id='{{ $folder->id }}'>Delete</button>
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

Controller

public function index()
    {
        $user = User::findOrFail(Auth::id());

        $folders = $user->folders()->get();

        return view('folders.index', compact('folders'));
    }

    public function store(Request $request)
    {
        $attributes = $request->validate([
            'name' => 'required'
        ]);

        $attributes['user_id'] = Auth::id();

        $folder = Folder::create($attributes);

        return Response::json($folder);
    }

    public function destroy(Folder $folder)
    {
        $folder->delete();

        return Response::json($folder);
    }

Everything works well, it adds me the element to the DOM, but there is a little problem, when I am trying to delete a folder after i create it, it does not work, I need to refresh my page and then it is working.

Answer 1

Easy mistake to make. jQuery can't find the dynamically added button directly.
Instead of

$('.delete-folder').click(function(e) {...});

use

$('body').on('click','.delete-folder', function(e) {...});