jquery - 甜蜜警报不会等到用户单击“确定”

Question

我将 SweetAlert 与 Symfony 结合使用，我希望用户在完成删除操作之前进行确认。

发生的情况是，当用户单击删除按钮时，SweetAlert 会弹出，然后立即消失，并且该项目被删除。

在用户从 SweetAlert 弹出窗口中单击“确定”之前，我不希望删除该项目。

这是我的设置。

JS:

function myFunction() {
        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this Job Title!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, delete it!",
            closeOnConfirm: false,
            closeOnCancel: false
        }, function (isConfirm) {
            if (isConfirm){
                swal("Deleted!", "Job Title has been deleted.", "success");
            } else {
                swal("Cancelled", "Job Title was not deleted.", "error");
            }
        });
    };

HTML:

<a href="{{ path('setup_jobtitles_delete', {'id': jobTitle.id}) }}" onclick="myFunction()" class="btn btn-white" data-toggle="tooltip" data-toggle="tooltip" data-placement="top" title="Delete">
    <i class="fa fa-trash"></i>
</a>

如何让删除操作等到用户单击“确定”为止？

编辑:我最终使用 $.post 并将 href 移动到 data- ，如下所示:

 <a href="#" onclick="myFunction(this)" data-url="{{ path('setup_jobtitles_delete', {'id': jobTitle.id}) }}" class="btn btn-white" data-toggle="tooltip" data-toggle="tooltip" data-placement="top" title="Delete">
                                                                <i class="fa fa-trash"></i>
                                                            </a>
function myFunction(btn) {
        var url = $(btn).data('url');
        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this Job Title!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, delete it!",
            closeOnConfirm: false
        }, function () {
             $.post(url, function(){
                swal("Deleted!", "Job Title has been deleted.", "success");
                $(btn).parents('tr').remove();
             });
        });
    };

Answer 1

您可以执行以下操作:

<a href="/delete/me" class="confirm" data-title="Want to delete this?" data-type="warning">Click me</a>

<a href="/edit/me" class="confirm" data-title="Info image" data-type="info">Click me</a>

和JS部分，需要加载jquery

$(function() {
    $('a.confirm').click(function (e) {
            e.preventDefault();
            var tthis = $(this);
            swal({
                title: "Are you sure?",
                text: $(this).data('title'),
                type: $(this).data('type'),
                showCancelButton: true,
                confirmButtonText: "Yes",
                cancelButtonText: "No",
            }, function (isConfirm) {
                if (isConfirm) {
                    document.location.href = tthis.attr('href');
                }
            });
        });
});

要等待用户确认，您必须使用 e.preventDefault(); 取消链接操作；

然后在用户确认后手动转到链接。