Web components created after page load does not work

[Joveice]

Hello,

 

So when I upload a file it creates a new row in the table. if I click Delete nothing happens. if I click delete on a file that was there on page load it works. If I refresh and click the newly created one it works.

 

Html code (first row is the javascript added one)

 

<tbody id="filetable">
  <tr>
    <td>Untitled.jpg</td>
    <td>jpg</td>
    <td></td>
    <td>1 second ago</td>
    <td>joveice</td>
    <td>
      <a href="/cdn/file/95" class="btn btn-success btn-xs">VIEW</a>
      <button class="btn btn-danger btn-xs deleteFile" data-id="95">DELETE</button>
    </td>
  </tr>
  <tr>
    <td>Untitled.jpg</td>
    <td>jpg</td>
    <td></td>
    <td>1 minute ago</td>
    <td>joveice</td>
    <td>
      <a href="/cdn/file/94" class="btn btn-success btn-xs">VIEW</a>
      <button class="btn btn-danger btn-xs deleteFile" data-id="94">DELETE</button>
    </td>
  </tr>
</tbody>

As you can see there is nothing different on them other than the ID (which is correct)

 

JS

$('.deleteFile').on('click', function() {
            toastr.options = {
                "closeButton": true,
                "debug": false,
                "progressBar": true,
                "preventDuplicates": false,
                "positionClass": "toast-top-right",
                "onclick": null,
                "showDuration": "400",
                "hideDuration": "1000",
                "timeOut": "7000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            };

            var dataId = $(this).attr('data-id');

            var $tr = $(this).closest('tr');

            $.ajax({
                url: '/cdn/file' + '/' + dataId,
                type: 'DELETE',
                data: {
                    '_token': 'token'
                },
                success: function( msg ) {
                    if ( msg.status === 'success' ) {
                        $tr.find('td').fadeOut(100, function () {
                            $tr.remove();
                        });
                        Snackbar.show({
                            text: msg.msg,
                            pos: 'top-right'
                        });
                    } else {
                        Snackbar.show({
                            text: 'Oops.. ' + msg.msg,
                            textColor: '#ff0000',
                            pos: 'top-right'
                        });
                    }
                },
                error: function( data ) {
                    if ( data.status === 422 ) {
                        Snackbar.show({
                            text: 'Oops.. Something went wrong!',
                            textColor: '#ff0000',
                            pos: 'top-right'
                        });
                    }
                }
            });

            return false;
        });

 I just started doing JS and I don't know why this is happening.

[Joveice]

$(document).on('click', '.deleteFile', function() {