如何使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');
}
});

正如(谢天谢地？)显而易见的那样，即使isDirty是true，e.preventDefault()也不会停止链接。我从这里去掉了对话框代码，因为它不会影响结果。

以下是另一种尝试(包括对话框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。

有人想让其中一个发挥作用吗？还是另一条路线？网络开发不是我的强项，所以也许我错过了一些简单的东西。如果我遗漏了任何其他重要信息，开始喝酒，希望这能帮助我的思维能力，我深表歉意。。

Answer 1

使用以下行更新对话框的leaf函数。

$(e.target).click();

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