注销前添加jQuery确认

Question

我是jQuery的新手，我在这里使用Confirm框。 但是我遇到了一个问题，即在确认对话框中的注销之前，我的当前页面会重定向回“登录”页面。

下面是我的脚本：

$('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();
                            },
                        }
                    });

 });

Answer 4

你为什么不这样使用-

$('a#logout').on('click', function(){
    if($(this).confirm({title: 'Logout Confirmation', content: 'Are you sure you want to logout?'})){
    window.location.href="extra-login.html";
}else{
    return false;
}
});