Capture 'montré' événement de bootstrap onglet

J'ai quelques "statique" HTML sur ma page:

<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>

Au chargement de la page, j'ai créer un onglet "cadre", c'est à dire créer le fichier de bootstrap onglets et des conteneurs de contenu.

- Je déclencher le processus avec:

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

Et "prepareDivisionTabs" fait ceci:

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));
    });
}

Pour info, le "renderDivisionTabPaneContents" dans le ci-dessus ne ce:

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")
    });
}

Tout bon jusqu'ici. Mon chargement de la page, mon onglet contenu sont rendus, et quand je clique sur les différents onglets, le contenu est affiché.

Maintenant, plutôt que de charger tout le contenu au début, je veux charger le contenu de l'onglet juste-à-temps à l'aide de la 'montré' événement des onglets. Pour tester cela, je voulais juste m'assurer que je pouvais obtenir une alerte javascript lorsque l'onglet est affiché. Donc, j'ai créer ce qui suit pour déclencher l'attachement de l'onglet événements:

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

qui appelle:

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

J'avais donc s'attendre à voir l'ONGLET "CHANGÉ" alerte après le changement d'onglet. Mais ... je ne vois pas d'alertes.

Quelqu'un pourrait-il m'aider ici?