添加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

我猜对话没有阻塞（我不知道 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;
                                },
                            }
                        });

                    });

但是您的代码立即重定向的主要原因是 link 中的 href 标记。你基本上有一个 link 到另一个页面，它也试图运行一些 JS，但是因为它是 link 它在 JS 甚至可以运行之前重定向。改为这样做：

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

Answer 2

问题是您的锚点元素默认操作是将用户带到登录页面，但未被阻止。

您可以调用 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 3

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

$('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注销前确认

Add jQuery Confirm before Logout

html

javascript

jquery

jquery-plugins