Datatable удалить строку на мобильном устройстве

Я использую laravel с datatable для отображения большой таблицы данных.

У меня есть кнопка удаления в конце каждой строки, чтобы удалить запись из моей базы данных. Я использую ajax и, если он успешен, удаляю строку.

Он хорошо работает на настольном компьютере, но не работает на мобильном устройстве (кроме случаев, когда я установил компьютерную версию).

Вот моя таблица:

<table class = "datatable table table-striped- table-bordered table-hover table-checkable" id = "m_table_1">
    <thead>
        <tr>
            <th>Numéro</th>
            <th>Bâtiment</th>
            <th>Nature</th>
            <th>Options</th>
        </tr>
    </thead>
</table>

Мой js для загрузки данных:

 var table =     $('.datatable').DataTable({
        responsive: true,
        ajax: '{{ route('lots.clientSide') }}',
        deferRender: true,
        scrollY: '500px',
        scrollCollapse: true,
        scroller: true,
        stateSave:      true,
        select: true,
        language: {
            url: "//cdn.datatables.net/plug-ins/1.10.16/i18n/French.json",
            select: {
        rows: "%d éléments sélectionnés"
    }
        },   
        columns: [
            { data: 'id' },
            { data: 'batiment.nom', defaultContent: "----" },
            { data: 'nature' },
            { data: null }
        ],
        columnDefs:[
            {targets:-1,title:"Options",width: "10%",orderable:!1,render:function(a,t,e,n){
            var slug = e.id;
            var url = 'show';
            var url_delete =  "lots/delete/"+e.id;
            return '\n<a href = "'+url+'" class = "m-portlet__nav-link btn m-btn m-btn--hover-brand m-btn--icon m-btn--icon-only m-btn--pill" title = "View">\n'+
            '<i class = "la la-eye"></i>\n'+
            '</a>'+
            '<span class = "dropdown">\n'+
            '<a href = "#" class = "btn m-btn m-btn--hover-brand m-btn--icon m-btn--icon-only m-btn--pill" data-toggle = "dropdown" aria-expanded = "true">\n'+
            '<i class = "la la-ellipsis-h"></i>\n'+
            '</a>\n'+
            '<div class = "dropdown-menu dropdown-menu-left">\n'+
            '<a class = "dropdown-item" href = "#"><i class = "la la-edit"></i> Editer</a>\n'+
            '<button class = "delete dropdown-item" data-href = "'+url_delete+'"><i class = "la la-trash"></i> Supprimer</button>\n'+
            '</div>\n'+
            '</span>\n'

            }}
        ]
    });

И мой код для удаления:

$(document).on('click', '.delete', function(e){
            var $this = $(this);
            table.row($this.parents('tr')).remove().draw(false);
            alert("click");
            $.ajax({
                    type: 'GET',
                    url: $this.data('href'),
                    dataType: 'json',
                    success: function( data ) {

   },
   error: function(xhr, status, error) {
     alert("fail");
   }         
            })


        });

Я пробовал использовать инструменты отладки на компьютере, и у меня ничего не было на консоли.

Если я использую эту функцию на компьютере, она работает. Но если я уменьшу размер окон, он не будет работать с определенным размером.

Это нормально? Могу я что-нибудь с этим поделать?

Благодарить