导航到其他页面时的 SweetAlert

Question

在我的应用程序中，如果我没有点击保存并想从当前页面导航，它应该询问甜蜜警报are you sure want to leave? 和两个按钮save and leave。我该怎么做。

目前我正在使用 jquery，当我单击任何锚标记但立即导航到其他页面时，它会显示 sweetalert 框。

我的代码是

jQuery(document).click(function(e) {
                if (jQuery(e.target).is('a')) {
                    swal({
                        title: "Are you sure?",
                        text: "Want to continue without saving?",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "Leave",
                        closeOnConfirm: false,
                        html: false
                        }

                    );
                }    
        }); 

Answer 1

首先，您需要防止<a> 元素的默认行为，因为您错过了它，它仍然会重定向您的操作，其次是如果在swal 中单击确认，您需要重定向用户，例如：

jQuery(document).click(function(e)
{
  if (jQuery(e.target).is('a'))
  {
    // Prevent default behavior
    e.preventDefault();

    swal({
      title: "Are you sure?",
      text: "Want to continue without saving?",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Leave",
      closeOnConfirm: false,
      html: false
    }, function (isConfirm) {

      if (isConfirm)
      {
        // If user clicked confirm navigate away
        window.location = jQuery(e.target).attr("href");
      }
    });

    return false;
  }
});

希望对你有帮助

Answer 2

看看 Event.preventDefault() 或 e.preventDefault()

该锚标记a 将创建一个事件以导航到其网址，即使它是href=#。