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

 });

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;
}
});

在注销之前添加jQuery确认

4 个答案: