导航到其他页面时，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将创建一个事件以导航到其url，即使它的href=# 。