如何根據確認對話框在Boostrap選項卡之間切換？

Question

我嘗試了兩件我認爲可行的事情，當然，他們都沒有。以下是我目前正在嘗試的兩種方式，一些JSFiddle示例代碼（我正在使用JQuery 2.2.1）。

的HTML樣本：

<ul class="nav nav-tabs" id="myTabs"> 
    <li class="active"><a href="#about" data-toggle="tab">About</a></li> 
    <li><a href="#contact" data-toggle="tab">Contact</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="about"> 
    <div class="form-group"> 
     <label for="txtAbout">About me: </label> 
     <input type="text" class="form-control" id="txtAbout"> 
    </div> 
    </div> 
    <div class="tab-pane" id="contact"> 
    <div class="form-group"> 
     <label for="txtContact">Contact me: </label> 
     <input type="text" class="form-control" id="txtContact"> 
    </div> 
    </div> 
</div> 

我當前的嘗試：https://jsfiddle.net/0noo2bwg/3/

var isDirty = false; 

$(".form-control").change(function() { 
    isDirty = true; 
}); 

$('#myTabs a').click(function (e) { 
    e.preventDefault(); 
    if (!isDirty) { 
    $(this).tab('show'); 
    } 
}); 

由於是（？謝天謝地）明顯，在小提琴，e.preventDefault()不會停止鏈接，即使isDirty是true 。我將對話代碼從這裏除去，因爲它不影響結果。

這裏的其他嘗試（與對話HTML和包括JS邏輯）：https://jsfiddle.net/kLe75gtr/3/

var isDirty = false; 

$(".form-control").change(function() { 
    isDirty = true; 
}); 

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { 
    if (isDirty) { 
    e.preventDefault(); 
    $('#dialog-confirm').dialog({ 
     resizable: false, 
     modal: true, 
     buttons: { 
     "Leave": function() { 
      $(this).dialog("close"); 
      isDirty = false; 
      $(e.target.text).tab("show"); 
     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
     } 
    }); 
    } 
}); 

e.preventDefault()具有發生第一或同時對話正在被尋址的標籤將切換。這裏，$(e.target.text).tab("show")只是不切換選項卡。可能是因爲它被阻止在相同的功能...... idk。

任何人有一個想法，使這些工作之一？或不同的路線？ Web dev並不是我的強項，所以也許我錯過了一些簡單的東西。道歉，如果我遺漏了任何其他重要信息，開始飲酒，希望能夠幫助我的思維能力..

Answer 1

用下面一行更新對話框的離開功能。

$(e.target).click(); 

我已經更新了的jsfiddle：https://jsfiddle.net/kLe75gtr/5/