Bootstrap Nave 选项卡和淘汰赛点击事件

Question

这是我花了很多时间调试的问题； 我会自己回答这个问题，因为这是一个奇怪的异常。

我正在使用 Bootstrap 的 nav-tabs 组件来创建包含不同类型数据的选项卡——单击选项卡时，该组件将调用适当的函数来发出数据请求。

我也在使用 Knockout 将函数调用绑定到 nav-tab ul 中的每个列表项，并使用 setTimeout 来模拟 AJAX 调用。

---

问题是：

当我点击first-child 以外的选项卡时，正确的tab-pane 会照常出现——但是，在一段时间内，当前选项卡的tab-pane 会重置为first-child tab-pane（如如果您单击第一个选项卡）。我什至可以通过元素检查器看到这一点。

Bootstrap/jQuery data-toggle="tab" 和 Knockout 的 data-bind="click: myFunction" 之间似乎存在冲突。

HTML

---

<ul id="clientDetailsTab" class="nav nav-tabs" data-tabs="tabs">

    <li class="active">
        <a href="#detailGeneralInfo" data-toggle="tab" data-bind="click: ClientSearch.details.getGeneralInfo">General Information</a>
    </li>
    <li>
        <a href="#detailAddress" data-toggle="tab" data-bind="click: ClientSearch.details.getAddress">Address</a>
    </li>
    <li>
        <a href="#detailPhone" data-toggle="tab" data-bind="click: ClientSearch.details.getPhone">Phone</a>
    </li>
    <li>
        <a href="#detailRelations" data-toggle="tab" data-bind="click: ClientSearch.details.getRelations">Relations</a>
    </li>
    <li>
        <a href="#detailCritical" data-toggle="tab" data-bind="click: ClientSearch.details.getCriticalInfo">Critical Info</a>
    </li>

</ul>
<div class="tab-content" data-bind="with: ClientSearch.selectedClient">

    <div id="detailGeneralInfo" class="tab-pane active" style="border: solid 1px blue;">
        General: <span data-bind="text: _general.birthDate"></span>
    </div>
    <div id="detailAddress" class="tab-pane" style="border: solid 1px orange;">
        Address: <span data-bind="text: _address.more"></span>
    </div>
    <div id="detailPhone" class="tab-pane" style="border: solid 1px purple;">
        Phone: <span data-bind="text: _phone.more"></span>
    </div>
    <div id="detailRelations" class="tab-pane" style="border: solid 1px red;">
        Relations: <span data-bind="text: _relations.more"></span>
    </div>
    <div id="detailCritical" class="tab-pane" style="border: solid 1px green;">
        Critical: <span data-bind="text: _critical.more"></span>
    </div>

</div>

JavaScript

---

function GetGeneralInformation() {...}  // THIS one actually makes an ajax request

// THIS one uses a setTimeout to mimic an ajax request
function GetAddress() {
    var selected = selectedClient()
        , clientId = selected.clientId;

    setTimeout(function () {
        selectedClient($.extend(
            (selectedClient()), {
                _address: { more: 'GetAddress' }
            }
        ));
    }, (1000 * 4.5));
    console.log('GOT ADDRESS', selected);
}

function GetPhone() {...}  // same as above
function GetRelations() {...}  // same as above
function GetCriticalInformation() {...}  // same as above

那么为什么active 类在单击时被添加到正确的tab-pane，然后将first-child tab-pane 的类重置为active...？

如前所述，我将在下面提供答案...

Answer 1

导致问题的原因如下：

在问题中我注意到了 JavaScript：

function GetGeneralInformation() {...}  // THIS one actually makes an ajax request

// THIS one uses a setTimeout to mimic an ajax request
function GetAddress() {
    var selected = selectedClient()
        , clientId = selected.clientId;

    setTimeout(function () {
        selectedClient($.extend(
            (selectedClient()), {
                _address: { more: 'GetAddress' }
            }
        ));
    }, (1000 * 4.5));
    console.log('GOT ADDRESS', selected);
}

function GetPhone() {...}  // same as above
function GetRelations() {...}  // same as above
function GetCriticalInformation() {...}  // same as above

如果我只是将setTimeout 注释掉，那么我不会遇到任何问题：

function GetAddress() {
    var selected = selectedClient()
        , clientId = selected.clientId;

    //setTimeout(function () {
        selectedClient($.extend(
            (selectedClient()), {
                _address: { more: 'GetAddress' }
            }
        ));
    //}, (1000 * 4.5));
    console.log('GOT ADDRESS', selected);
}

此外，如果您更改超时持续时间，您会注意到问题的相应行为。

我希望这可以帮助一些像我一样迷失的可怜的灵魂——注意超时。

--干杯