从引导选项卡捕获'显示'事件

Question

我的页面上有一些"静态"HTML:

<div id="DIVISIONS">
    <ul class="nav nav-tabs" id="DIVISIONTABS">
        @* <li> nodes will be injected here by javascript *@
    </ul>
    <div class="tab-content" id="DIVISIONTABPANES">
        @* <div class="tab-pane"> nodes will be injected here by javascript *@
    </div>
</div>

在页面加载时,我创建一个选项卡'框架',即创建引导选项卡和选项卡内容容器.

我通过以下方式触发流程:

$(window).bind("load", prepareDivisionTabs);

而"prepareDivisionTabs"就是这样做的:

function prepareDivisionTabs() {
    // Retrieve basic data for creating tabs
    $.ajax({
        url: "@Url.Action("GetDivisionDataJson", "League")",
        cache: false
    }).done(function (data) {
        var $tabs = $('#DIVISIONTABS').empty();
        var $panes = $('#DIVISIONTABPANES').empty();
        for (var i = 0; i < data.length; i++) {
            var d = data[i];
            $tabs.append("<li><a href=\"#TABPANE" + d.DivisionId + "\" data-toggle=\"tab\">" + NMWhtmlEncode(d.Name) + "</a></li>");
            $panes.append("<div id=\"TABPANE" + d.DivisionId + "\" class=\"tab-pane\"></div>")
        }
        renderDivisionTabPaneContents(data);
    }).fail(function (err) {
        alert("AJAX error in request: " + JSON.stringify(err, null, 2));
    });
}

有关信息,上面的"renderDivisionTabPaneContents"执行此操作:

function renderDivisionTabPaneContents(data) {
    for (var i = 0; i < data.length; i++) {
        var d = data[i];
        renderDivisionTabPaneContent(d.DivisionId);
    }
}

function renderDivisionTabPaneContent(id) {
    var $tabPane = $('#TABPANE' + id);
    $tabPane.addClass("loader")
    $.ajax({
        url: "/League/GetDivisionPartialView?divisionId=" + id,
        cache: false
    }).done(function (html) {
        $tabPane.html(html);
    }).fail(function (err) {
        alert("AJAX error in request: " + JSON.stringify(err, null, 2));
    }).always(function () {
        $tabPane.removeClass("loader")
    });
}

到目前为止都很好. 我的页面加载,我的标签内容被渲染,当我点击不同的标签时,会显示相关的内容.

现在,我不想在开始时加载所有内容,而是希望通过使用选项卡的"显示"事件来及时加载标签内容.为了测试这一点,我想确保在显示选项卡时能够获得javascript警报.因此,我创建以下内容以触发tab显示事件的附件:

$(function () {
    attachTabShownEvents();
})

哪个叫:

function attachTabShownEvents() {
    $(document).on('shown', 'a[data-toggle="tab"]', function (e) {
        alert('TAB CHANGED');
    })
}

因此,我希望在更改选项卡后看到"TAB CHANGED"警报.但是......我看不到警报.

有人可以帮帮我吗？

Answer 1

选项卡更改的正确事件绑定是shown.bs.tab.

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    alert('TAB CHANGED');
})