Ajax calls problems - php

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">×</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) {...});