JQuery 选项卡在确认之前阻止导航答案

【问题标题】：JQuery tabs prevent navigation until confirmJQuery 选项卡在确认之前阻止导航
【发布时间】：2015-02-06 01:48:24
【问题描述】：

我有一系列用于调度程序应用程序的选项卡。在一个选项卡上，我使用他们在数据库中的人员记录中的信息预先填充表单字段并激活下一个选项卡。当用户单击下一个选项卡时，我会要求他们在继续之前确认其个人信息是正确的：

$calendarTab.on('click', function(event){
       event.preventDefault();
       disabled = $calendarTab.attr('aria-disabled');
       if(typeof disabled !== undefined && disabled !== 'true'){
            if(confirm('Is The Information Below Correct?')){
                  $tabs.tabs('disable', 1);
                  $tabs.tabs('option', 'active', 2);
            }
            else{
                $tabs.tabs('option', 'active', 1);
            }
        }
    });

除了event.preventDefault(); 之外，此代码工作正常该页面仍显示下一个选项卡中的内容，如果用户取消确认对话框，该页面将返回。

虽然功能正常，但页面以这种方式运行是很草率的。

有谁知道为什么会发生这种情况以及如何在用户确认之前阻止导航？

提前致谢。

编辑： Working Fiddle

【问题讨论】：

你能创建一个小提琴来重现这个问题吗？
小提琴创建Here

标签： jquery navigation jquery-ui-tabs confirm

【解决方案1】：

如果您不想切换到新标签，您可以捕获tabsbeforeactivate 事件并取消它。 these lines will work 的一些东西

   $tabs.on('tabsbeforeactivate', function(event, ui){
       if (ui.newTab.text() == 'Calendar') {
           disabled = $calendarTab.attr('aria-disabled');
           if(typeof disabled !== undefined && disabled !== 'true'){
                if(confirm('Is Your Contact Information Correct?')){
                      $tabs.tabs('disable', 1);
                }
                else{
                    event.preventDefault();
                }
            }
       }

    });

请注意，您将事件处理程序添加到选项卡对象，而不是单个选项卡。我使用标签的文本来确定它是哪一个，但您也可以使用 id、类或数据元素。这是link

【讨论】：