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

Question

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

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

我想用这个SweetAlert函数代替confirm方法

    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

我让它相互依赖，以防有人想要调试。这似乎正在工作(检查浏览器控制台日志，何时打印'done')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

Add 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>