Twitter bootstrap 引导中堂选项卡和取消点击事件

这是一个我花了很多时间调试的问题；我将自己回答这个问题，因为这是一个奇怪的反常现象

我正在使用Bootstrap的nav tabs组件创建包含不同类型数据的选项卡，单击选项卡后，将调用相应的函数来发出数据请求

一、 另外，我使用Knockout将函数调用绑定到nav选项卡ul中的每个列表项，并使用setTimeout模拟AJAX调用

问题是：

当我单击第一个子选项卡以外的选项卡时，正确的选项卡窗格会像往常一样出现-但是，在一段时间内，当前选项卡的选项卡窗格会重置为第一个子选项卡窗格，就像单击第一个选项卡一样。我甚至可以通过元素检查器看到这一点

似乎引导/jQuery data toggle=tab和Knockout的data bind=click:myFunction之间存在冲突

HTML

那么，为什么要在单击后将活动类添加到正确的选项卡窗格中，然后将第一个子选项卡窗格的类重置为活动

正如我前面提到的，我将在下面提供答案…

以下是导致问题的原因：

在问题中，我注意到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);
}

此外，如果更改超时持续时间，您将注意到问题会相应地发生

我希望这能帮助一些像我一样迷路的可怜的灵魂——当心超时

-干杯

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

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

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