注销前添加jQuery确认

Question

我是jQuery新手，我正在使用here的确认框。但是我面临着一个问题，我的当前页面甚至在确认我在对话框中注销之前都会重定向回登录页面。

下面是我的脚本：

$('a#logout').on('click', function () {

                        var isConfirmed = $.confirm({
                            title: 'Logout Confirmation',
                            content: 'Are you sure you want to logout?',
                            buttons: {
                                confirm: function () {
                                    // $.alert('Confirmed!');
                                   return true;
                                },
                                cancel: function () {
                                    // $.alert('Canceled!');
                                    return false;
                                },
                            }
                        });

                        if(isConfirmed == true){
                            window.location.href="extra-login.html";
                        }

                    });

这是我的HTML

<a href="extra-login.html" id="logout"> Log Out <i class="entypo-logout right"></i> </a>

任何帮助都将不胜感激。提前感谢！

Answer 1

问题是您的锚元素的默认操作是让用户登录页面，这是不被禁止的。

您可以调用event.preventDefault()来执行此操作。

此外，confirm插件看起来像一个非阻塞插件，因此您需要将重定向代码移动到成功处理程序。

$('a#logout').on('click', function(e) {
  e.preventDefault();

  var isConfirmed = $.confirm({
    title: 'Logout Confirmation',
    content: 'Are you sure you want to logout?',
    buttons: {
      confirm: function() {
        window.location.href = "extra-login.html";
      },
      cancel: function() {},
    }
  });
});

Answer 2

我猜对话没有阻塞(我不知道JS中有什么)。您应该将成功代码放在确认按钮的回调中，如下所示：

$('a#logout').on('click', function () {

                        $.confirm({
                            title: 'Logout Confirmation',
                            content: 'Are you sure you want to logout?',
                            buttons: {
                                confirm: function () {
                                    // $.alert('Confirmed!');
                                    //I'm guessing this function is called when the button is clicked.
                                    window.location.href="extra-login.html";
                                   return true;
                                },
                                cancel: function () {
                                    // $.alert('Canceled!');
                                    return false;
                                },
                            }
                        });

                    });

但代码立即重定向的主要原因是链接中的href标记。你基本上有一个指向另一个页面的链接，这个页面也试图运行一些JS，但因为它是一个在JS可以运行之前就重定向的链接。改为执行以下操作：

<a href="#" id="logout">
    Log Out <i class="entypo-logout right"></i>
</a>

Answer 3

我也是新手，我希望我的建议是正确的，但是你为什么不把href放在确认函数中。

$('a#logout').on('click', function (event) {
     var isConfirmed = $.confirm({
                        title: 'Logout Confirmation',
                        content: 'Are you sure you want to logout?',
                        buttons: {
                            confirm: function () {
                               window.location.href="extra-login.html";
                            },
                            cancel: function () {
                              event.preventDefault();
                            },
                        }
                    });

 });