Question

目前这是我用来运行基于类＆＃34;确认＆＃34;的正常确认窗口的代码。这一切都是通过href链接完成的，而不是onClick事件按钮。由于点击的结果是运行另一个被剪切的代码放在另一个文件中（意图删除db中的一行）。

onchange=''

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

＆＃13;

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

＆＃13;

任何人都知道如何做到这一点，当我尝试将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

添加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 3

我写了这个函数：

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 4

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

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

4 个答案: