事件侦听器在执行ajax操作后消失，并在刷新后返回

Question

我有两个由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>");
                },
            });
        });