Php Ajax调用问题

我有两个ajax调用，一个用于创建，一个用于删除文件夹，下面是源代码

<!-- 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>

---

一切正常，它将元素添加到DOM中，但有一个小问题，当我在创建文件夹后尝试删除它时，它不工作，我需要刷新页面，然后它就工作了。

很容易出错。jQuery无法直接找到动态添加的按钮。
而不是

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

使用

---

非常感谢，我正在努力学习Ajax。它工作得非常好。

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);
    }

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

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