javascript - 如何根据确认对话框在 Bootstrap 选项卡之间进行切换？

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

正如(谢天谢地？)在 fiddle 中显而易见的那样，即使 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

使用以下行更新对话框的离开功能。

$(e.target).click();

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