页面未等待 SweetAlert 确认窗口的响应

Question

我正在尝试升级我的 JavaScript confirm() 操作以使用 SweetAlert。目前我的代码是这样的：

<a href="/delete.php?id=100" onClick="return confirm('Are you sure ?');" >Delete</a>

这会在导航到删除页面之前等待用户确认。我想使用 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!",   
 cancelButtonText: "No, cancel plx!",   
 closeOnConfirm: false,   
 closeOnCancel: false 
}, 
function(isConfirm){   
  if (isConfirm) {     
    swal("Deleted!", "Your imaginary file has been deleted.", "success");
  } 
  else {     
    swal("Cancelled", "Your imaginary file is safe :)", "error");  
  } 
});

我尝试过的一切都失败了。当显示第一个警报时，页面已经继续并删除了该项目并在用户单击警报按钮之前刷新。如何让页面等待用户输入？

任何帮助将不胜感激。

Answer 1

您不能将其用作confirm 的直接替代品。 confirm 阻止单线程执行，直到对话框被确认为止，您无法使用基于 JavaScript/DOM 的对话框产生相同的行为。

您需要在 success 回调中为您的警报框向/delete.php?id=100 发出请求。

而不是...

swal("Deleted!", "Your imaginary file has been deleted.", "success");

你需要

<a href="#">Delete<a>
...

$.post('/delete.php?id=100').then(function () {
  swal("Deleted!", "Your imaginary file has been deleted.", "success");
});

您还必须将您的 delete.php 修复为仅接受 POST 请求。允许GET请求删除资源是个大问题。当 Google 或任何其他抓取工具第一次找到您的网页时，它会查看您文档中每个链接的 href 并跟踪每个链接，从而删除您的所有内容。他们不会被confirm 框阻止，因为他们可能（除了 Google）不会评估任何 JavaScript。

Answer 2

你可以这样做。

HTML：

<a href="/delete.php?id=100" class="confirmation" >Delete</a>

JS：

$('.confirmation').click(function (e) {
    var href = $(this).attr('href');

    swal({
        title: "Are you sure?",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete it!",
        cancelButtonText: "No, cancel plx!",
        closeOnConfirm: true,
        closeOnCancel: true
    },
            function (isConfirm) {
                if (isConfirm) {
                    window.location.href = href;
                }
            });

    return false;
});

似乎是一个 hack，但它对我有用。

Answer 3

$('.delete').click(function () {
var id = this.id;
swal({
  title: "Are you sure?",
  text: "Your will not be able to recover this post!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  closeOnConfirm: false
},
function(){
   alert(id);
});
});


<a id="<?php echo $row->id_portfolio ?>" class=" delete">

Answer 4

这是 Angular 指令中的一个示例（因为 SweetAlert 是通过 Angular 指令包装器提供的）。这是在 JavaScript 中执行此操作的一种“优雅”方法。在点击事件上，有一个 e.stopImmediatePropagation()，然后如果用户确认，它会评估“ng-click”函数。 （注意 scope.$eval 不是 JavaScript eval()）。

标记： <i class="fa fa-times" ng-click="removeSubstep(step, substep)" confirm-click="Are you sure you want to delete a widget?"></i>

简单的“确认点击”指令：

/**
 * Confirm click, e.g. <a ng-click="someAction()" confirm-click="Are you sure you want to do some action?">
 */
angular.module('myApp.directives').directive('confirmClick', [
  'SweetAlert',
  function (SweetAlert) {
    return {
      priority: -1,
      restrict: 'A',
      link: function (scope, element, attrs) {
        element.bind('click', function (e) {
          e.stopImmediatePropagation();
          e.preventDefault();

          var message = attrs.confirmClick || 'Are you sure you want to continue?';

          SweetAlert.swal({
            title: message,
            type: 'warning',
            showCancelButton: true,
            closeOnConfirm: true,
            closeOnCancel: true
          }, function (isConfirm) {
            if (isConfirm) {
              if(attrs.ngClick) {
                scope.$eval(attrs.ngClick);
              }
            } else {
              // Cancelled
            }
          });
        });
      }
    }
  }
]);