Question

我的SweetAlert确认没有等待任何行动。确认框闪烁，然后执行操作。怎么了？

<script type="text/javascript">
    function confirmDelete() {
        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this imaginary file!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Delete",
            cancelButtonText: "Cancel",
            closeOnConfirm: false,
            closeOnCancel: false
        });
    }
</script>

<form onsubmit="confirmDelete()" action="index.php" method="post">
    <button type="submit" name="delete">Delete</button>
</form>

也尝试了这个。同样的问题......窗口只是闪烁并执行动作。

<script type="text/javascript">
    function confirmDelete() {
        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this imaginary file!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Delete",
            cancelButtonText: "Cancel",
            closeOnConfirm: false,
            closeOnCancel: false
        },
        function(isConfirm) {
            if (isConfirm) {
                document.deleteForm.submit();
            }
        });
    }
</script>

<form id="deleteForm" action="index.php" method="post">
    <button onclick="confirmDelete()" type="input" name="delete">Delete</button>
</form>

Answer 1

我有一种感觉这是由于页面刷新，因为一旦调用回调，就不会阻止提交表单。

Answer 2

您可以使用preventDefault：

<form id="deleteForm" action="index.php" method="post">
    <button id="delete-btn" type="input" name="delete">Delete</button>
</form>

<script type="text/javascript">
    $("#delete-btn").on("click", function(e) {
        e.preventDefault(); //prevents the form from being submitted
        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this imaginary file!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Delete",
            cancelButtonText: "Cancel",
            closeOnConfirm: false,
            closeOnCancel: false
        },
        function(isConfirm) {
            if (isConfirm) {
                document.deleteForm.submit();
            }
        });
    }
</script>

Answer 3

按照以下说明更改代码：

视图中：

<form id="my_form" action="index.php" method="post">
     <a href="javascript:void(0);" class="btn btn-primary _delete_data">DELETE</a>
</form>

在js代码中：

<script>
    $(document).ready(function(){
        $('._delete_data').click(function(e){

            Swal.fire({
                title: 'Are 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) {
                    $(document).find('#my_form').submit();
                }
            })
        });
    });            
</script>

SweetAlert没有等待确认

3 个答案: