如何根据确认对话框在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中被阻止了。

任何人都有做这些工作的想法吗？ 还是其他路线？ Web开发人员不是我的强项，所以也许我缺少一些简单的东西。 如果我没有其他重要信息，我深表歉意，开始喝酒，希望对我的思维能力有所帮助。

Answer 1

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

$(e.target).click();

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