如何运行 SweetAlert 而不是默认的 javascript 确认方法

Question

目前，这是我用来运行基于“确认”类的正常确认窗口的代码。这一切都是通过 href 链接完成的，而不是在按钮 onClick 事件上完成的。由于单击的结果是运行另一个被截断放置在不同文件中的代码（目的是删除 db 中的一行）。

$('.confirmation').on('click', function () {
        return confirm('Er du sikker på at du vil slette?');
    });

我想要的是用这个 SweetAlert 函数替换确认方法

    swal({   
	title: "Are you sure?",   
	text: "You will not be able to recover this imaginary file!",  
	type: "warning", 
	showCancelButton: true,   
	confirmButtonColor: "#DD6B55",   
	confirmButtonText: "Yes, delete it!",   
	closeOnConfirm: false 
}, function(){   
	swal("Deleted!", "Your imaginary file has been deleted.", "success"); 
});

任何人都知道如何做到这一点，当我尝试将 sweetalert 放在 onClick 函数中时会发生什么是警报出现但它会自动删除该行而无需我确认任何内容并且警报会淡出。

Answer 1

我找到了解决方案！

$('.confirmation').click(function(e) {
e.preventDefault(); // Prevent the href from redirecting directly
var linkURL = $(this).attr("href");
warnBeforeRedirect(linkURL);
});

 function warnBeforeRedirect(linkURL) {
    swal({
      title: "Leave this site?", 
      text: "If you click 'OK', you will be redirected to " + linkURL, 
      type: "warning",
      showCancelButton: true
    }, function() {
      // Redirect the user
      window.location.href = linkURL;
    });
  }

Answer 2

我制作了这个 codepen，以防有人想调试。看来这是有效的（检查浏览器控制台日志以了解何时打印“完成”） http://codepen.io/connorjsmith/pen/YXvJoE

$('.confirmation').on('click', function(){
  swal({
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!",
    cancelButtonText: "No, cancel plx!",
    closeOnConfirm: false,
    closeOnCancel: false
  },
  function(isConfirm){
    if (isConfirm) {
      console.log('done');
      swal("Deleted!", "Your imaginary file has been deleted.", "success");
    } else {
        swal("Cancelled", "Your imaginary file is safe :)", "error");
    }
  });
})

Answer 3

添加event.preventDefault();preventDefault();

      $('.confirmation').on('click', function (event) {
         event.preventDefault();
       swal({   
        title: "Are you sure?",   
        text: "You will not be able to recover this imaginary file!",  
        type: "warning", 
        showCancelButton: true,   
        confirmButtonColor: "#DD6B55",   
        confirmButtonText: "Yes, delete it!",   
        closeOnConfirm: false 
    }, function(){   
        swal("Deleted!", "Your imaginary file has been deleted.", "success"); 
    });

   });

Answer 4

试试这个文档中提到的代码：

$('.confirmation').on('click', function () {
    swal({   
         title: "Are you sure?",   
         text: "You will not be able to recover this imaginary file!",  
         type: "warning", 
         showCancelButton: true,   
         confirmButtonColor: "#DD6B55",   
         confirmButtonText: "Yes, delete it!",   
         closeOnConfirm: false 
    }, function(isConfirm){   
           return isConfirm; //Will be either true or false
    });
});

Answer 5

我写了这个函数：

function sweetConfirm(title, text) {
        event.preventDefault();
        var target = $(event.target);
        var href = null;
        var form = null;

        if (target.is("a")) href = target.attr("href");
        else if (target.is("button:submit")) form = target.closest("form");
        else if (target.is("button")) href = target.attr("href") || target.attr("value");

        swal({
            title: title,
            text: text,
            type: "warning",
            allowOutsideClick: true,
            showCancelButton: true
        }, function () {
            if (href) window.location.href = href;
            else if (form) form.submit();
        });
    }

sweetConfirm 函数将接受提交按钮、链接按钮或普通按钮，并在执行操作前询问。

您可以在以下场景中使用它：

<a type="button" class="btn btn-default" href="/" onclick="return sweetConfirm('Are you sure?')">
    Link Button 1
</a>

<button type="button" class="btn btn-default" href="/" onclick="return sweetConfirm('Are you sure?')">
    Link Button 2
</button>

<form action="/" method="DELETE">
    <input type="hidden" name="id" value="..">
    <button type="submit" class="btn btn-danger" onclick="return sweetConfirm('Are you sure?')">
        Delete
    </button>
</form>

Answer 6

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/sweetalert2@7.32.4/dist/sweetalert2.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.32.4/dist/sweetalert2.all.min.js"></script>
</head>
<body>

    <a id="confirmation" href="test">Test</a>

    <script type="text/javascript">
        $('#confirmation').click(function(e) {
e.preventDefault(); // Prevent the href from redirecting directly
var linkURL = $(this).attr("href");
console.log(linkURL)
warnBeforeRedirect(linkURL);
});

        function warnBeforeRedirect(linkURL) {
            Swal({
                title: 'sAre you sure?',
                text: "You won't be able to revert this!",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.value) {
                    window.location.href = linkURL;
                }
            })

        }



    </script>

</body>
</html>