Event listener disappears after ajax action and comes back after refresh

Question

I have two actions which is handled by Ajax one is delete and the other is undo-delete.

when clicks delete it delete the item and shows the undo-delete button but try to click the undo-delete button (no actions) and the console don't say anything

I checked the undo-delete button after the delete action it dose not have Event listener after refresh the page the Event listener appears and start to work normally.

Here is the PHP code.

@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

and here is the action for delete

/Action on delete button/

$('.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>");
            },
        });
    });

and the action for undo-delete

/Action on undo-delete button/

$('.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>");
                },
            });
        });