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。

任何人都有想法让其中一项工作吗？还是一条不同的路线？网络开发不是我的强项，所以也许我错过了一些简单的东西。抱歉，如果我遗漏了任何其他关键信息，开始喝酒，希望这有助于我的思考能力..

Answer 1

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

$(e.target).click();

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

如何根据确认对话框在Boostrap选项卡之间切换？

1 个答案: