jquery - Dynamically generated buttons don't work with Javascript

I have a dynamically generated table. Something like this:

Task
options




@foreach($tasks as $task)

{{task->name}}
 


@endforeach
 

Then I have a button to add a new task with AJAX.

When it succesfully adds a task, a new row with the recently created info gets appended:

 var task = '' +'' + data.name + '' +
'
'';

 $('#tasks-list').append(task);

This works fine. Everything is appended correctly and the buttons have the same propeties as the generated by Blade. Ids are also correct, there is no difference. When I click on edit or delete, I get no response. Not even an error in the console. When I refresh the site the buttons work so the stored information is actually correct.

Any help would be appreciated.

EDIT: Handler

   $('.delete-task').click(function(){
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        })
        var task_id = $(this).val();

        $.ajax({

            type: "DELETE",
            url: '/task_edit/' + task_id,
            success: function (data) {
                console.log(data);
                $("#contact_" + contact_id).remove();
            },
            error: function (data) {
                console.log('Error:', data);
            }
        });

    });

Answer

You can't do this using that way, you have to use delegation.

Example

$(document).on('click','.delete-task',function(){
    //your business here
}); 

or use delegate
and this is a similar question
jQuery click function doesn't work after ajax call?