Вкладки JQuery предотвращают навигацию до подтверждения

Question

У меня есть ряд вкладок для приложения планировщика. На одной вкладке я предварительно заполняю поля формы информацией из своей записи человека в db и активирую следующую вкладку. Когда пользователь нажимает на следующую закладку, я прошу их, чтобы подтвердить свои личные данные правильно, прежде чем продолжить:

$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(); кроме страницы по-прежнему отображает содержимое из следующей вкладке и будет идти назад, если пользователь отменяет диалог подтверждения.

В то время как функционально, это небрежно для того, чтобы страница вела себя так.

Кто-нибудь знает, почему это происходит и как я могу предотвратить навигацию, пока пользователь не подтвердит?

Заранее спасибо.

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

    }); 

Обратите внимание, что вы добавляете обработчик событий для объекта вкладок, а не на отдельных вкладках. Я использовал текст тега, чтобы решить, какой он был, но вы также можете использовать элемент id, class или data. Вот link