Слушатель событий исчезает после действия ajax и возвращается после обновления

У меня есть два действия, которые обрабатываются Ajax: одно - удалить, а другое - отменить удаление.

при нажатии кнопки удалить удалить элемент и показать кнопку отмены удаления, но попробуйте нажать кнопку отмены удаления (без действий), и консоль ничего не скажет

Я проверил кнопку отмены-удаления после действия удаления, в котором нет Event listener, после обновления страницы появляется Event listener и начинает работать нормально.

Вот код PHP.

@foreach($productCategories as $productCategory)
                            <tr class = "item{{ $productCategory->id }}">
                                <td><strong>{!! $productCategory->name !!}</strong></td>
                                <td class = "text-center">
                                    <button class = "edit-modal btn btn-info" data-id = "{{ $productCategory->id }}"
                                            data-name-ar = "{{ $productCategory->translate('ar')->name }}"
                                            data-name-en = "{{ $productCategory->translate('en')->name }}">
                                        <span class = "fa fa-pencil-square-o"></span> Edit
                                    </button>
                                    @if ($productCategory->soft_delete == 0)
                                        <button class = "delete-modal btn btn-danger"
                                                data-id = "{{ $productCategory->id }}"
                                                data-name-ar = "{{ $productCategory->translate('ar')->name }}"
                                                data-name-en = "{{ $productCategory->translate('en')->name }}">
                                            <span class = "fa fa-trash"></span> Delete
                                        </button>
                                    @else
                                        <button class = "btn btn-warning undo-delete"
                                                id = "{{ $productCategory->id }}"
                                                data-name-ar = "{{ $productCategory->translate('ar')->name }}"
                                                data-name-en = "{{ $productCategory->translate('en')->name }}">
                                            <span class = "fa fa-undo"></span> Undo Delete
                                        </button>
                                    @endif
                                </td>
                            </tr>
                        @endforeach

и вот действие для удаления

/ Действие при нажатии кнопки удаления /

$('.modal-footer').on('click', '.delete', function () {
        $.ajax({
            url: 'delete-product-category',
            type: 'post',
            data: {
                '_token': $('input[name=_token]').val(),
                'id': $('.category-id').text(),
                'soft_delete': 1
            },
            success: function (data) {
                let arabic_name = data.translations[0].name;
                let english_name = data.translations[1].name;

                $('.item' + data.id).replaceWith("<tr class='item" + data.id + "'><td><strong>" + arabic_name + "</strong></td><td class='text-center'><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-name-ar='" + arabic_name + "' data-name-en='" + english_name + "'><span class='fa fa-pencil-square-o'></span> Edit</button> <button class='btn btn-warning undo-delete' id='" + data.id + "' data-name-ar='" + arabic_name + "' data-name-en='" + english_name + "'><span class='fa fa-undo'></span> Undo Delete</button></td></tr>");
            },
        });
    });

и действие для отмены удаления

/ Действие на кнопку отмены-удаления /

$('.undo-delete').on('click', function () {
            $.ajax({
                url: 'undo-delete-product-category',
                type: 'post',
                data: {
                    '_token': $('input[name=_token]').val(),
                    'id': $(this).attr('id'),
                    'soft_delete': 0
                },
                success: function (data) {
                    let arabic_name = data.translations[0].name;
                    let english_name = data.translations[1].name;

                    $('.item' + data.id).replaceWith("<tr class='item" + data.id + "'><td><strong>" + arabic_name + "</strong></td><td class='text-center'><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-name-ar='" + arabic_name + "' data-name-en='" + english_name + "'><span class='fa fa-pencil-square-o'></span> Edit</button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-name-ar='" + arabic_name + "' data-name-en='" + english_name + "'><span class='fa fa-trash'></span> Delete</button></td></tr>");
                },
            });
        });