Question

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

$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

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

    });

请注意，您要将事件处理程序添加到tabs对象，而不是添加到各个选项卡。我使用标签的文本来决定它是哪一个，但你也可以使用id，class或data元素。这是link

JQuery选项卡阻止导航直到确认

1 个答案: