javascript - jquery-confirm 确认弹窗消失问题

Question

我有一个员工列表，每个员工都有一个删除操作按钮，我正在使用 jquery-confirm.js 库，但是当我单击删除按钮时，确认弹出窗口出现并在几秒钟后立即消失，而无需单击任何按钮。这是弹出的js代码

  $('.deleteBtn').on('click',function () {
    $.alert({
        title: 'تایید حذف',
        content: 'آیا میخواهید این کارمند حذف شود؟',
        rtl: true,
        closeAnimation: 'scale',
        useBootstrap:true,
        closeIcon: true,
        buttons: {
            confirm: {
                text: 'تایید',
                btnClass: 'btn-blue',
                action: function () {
                    $.alert('تایید شد.');
                }
            },
            cancel: {
                text: 'انصراف',
                action: function () {
                }
            }
        }
    });
});

这是删除按钮：

<td><a href="{{route('employee.delete',$employee->id)}}" class="deleteBtn"><i class="icon-trash"></i></a></td>

标签： javascriptlaravelpopup

Answer 1

当您单击此按钮时，它会转到该路线并刷新页面，您应该使用如下所示的 ajax 将您的按钮更改为：

<a id="{{$employee->id)}}" class="deleteBtn"><i class="icon-trash"></i></a>

和你的js代码：

$('.deleteBtn').on('click',function () {

let id = $(this).attr('id');
$.alert({
    title: 'تایید حذف',
    content: 'آیا میخواهید این کارمند حذف شود؟',
    rtl: true,
    closeAnimation: 'scale',
    useBootstrap:true,
    closeIcon: true,
    buttons: {
        confirm: {
            text: 'تایید',
            btnClass: 'btn-blue',
            action: function () {
              
            $.ajax({
                type: "get",
                url: "{{route('employees.delete')}}",
                data: {
                    'id': id
                },
                success: function (msg) {
                    alert('انجام شد!')

                   
                }
            });
            }
        },
        cancel: {
            text: 'انصراف',
            action: function () {
            }
        }
    }
});