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＆＃39; 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);
}

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

我希望这能帮助一些可怜的灵魂像我一样迷失 - 小心超时。

- 干杯

Bootstrap Nav Tabs＆amp;淘汰赛Click Click

1 个答案: