注銷前添加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;
}
});