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

我有一系列调度程序应用程序选项卡。在一个选项卡上，我预先填充表单字段，并在数据库中填入人员记录中的信息，然后激活下一个选项卡。当用户点击下一个标签，我问他们，以确认他们的个人信息，然后再继续是正确的：JQuery选项卡直到确认才阻止导航

$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(); 精细的页面仍然显示从一个选项卡的内容，并会去如果用户取消确认对话框，则返回。

虽然功能正常，但对于页面来说这样做很sl for。

有谁知道为什么会发生这种情况，以及我如何才能防止导航，直到用户确认？

在此先感谢。

编辑：Working Fiddle

来源

2014-04-17 Nathan Foss

你可以创建一个小提琴重现问题？ – steven

小提琴创建[这里]（http://jsfiddle.net/kG49X/3/） –

您可以捕获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，class或data元素。这里是link

来源

2014-04-18 17:07:35

优秀的解决方案，就像一个魅力！非常感谢你！ –

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

回答

相关问题