Захват "показанного" события со вкладки начальной загрузки

У меня есть некоторый "статический" 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>

При загрузке страницы я создаю вкладку 'framework', т.е. создаю вкладки начальной загрузки и контейнеры содержимого табуляции.

Я запускаю процесс с помощью

$(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, когда была показана вкладка. Итак, я создаю следующее, чтобы вызвать вложение показанных вкладок:

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

который вызывает:

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

Поэтому я ожидал, что после изменения вкладки см. предупреждение "TAB CHANGED". Но... я не вижу никаких предупреждений.

Может ли кто-нибудь помочь мне здесь?

Ответ 1

Правильное связывание событий для изменения вкладок - shown.bs.tab.

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

Ответ 2

Используйте мой пакет Nuget для lazyloading загрузочных вкладок здесь, его очень простой, просто добавьте класс "lazyload" в элемент "ul" загрузочных вкладок, затем добавьте "url-url", равный url для загрузки на любой элемент привязки элементов табуляции (a). это он.

https://www.nuget.org/packages/MT.BootstrapTabsLazyLoader.js/

Ответ 3

'show' и 'показанные' события не помогли мне. Мое решение - это не совсем конкретная ситуация с ОП, но существуют общие понятия.

У меня была такая же проблема с загрузкой, которая заставляла свои собственные события onclick на вкладках (кнопки меню и панели содержимого). Я хотел, чтобы ленивый груз загрузился в панель, в зависимости от того, какая кнопка меню была нажата, а некоторые кнопки отображают панель на текущей странице, другие - для загрузки страницы в iframe.

Сначала я заполнял данные в тег поля скрытой формы, что было той же проблемой. Трюк заключается в том, чтобы обнаружить какое-то изменение и действовать по этому поводу. Я решил проблему, вынудив изменения и используя альтернативное событие, прослушивающее кнопки, не касаясь бутстрапа.

1) запустите iframe target в качестве атрибута данных:

$('#btn_for_iframe').attr('data-url',iframeurl);

2) связать альтернативное событие с огнем, и внутри, замените источник iframe

$('#btn_for_iframe').on('mouseup',function(){
   console.log(this+' was activated');
   $('#iframe').attr('src',$('#btn_for_iframe').attr('data-url'));
});

3) запустите "change" событие на панели, затем загрузите iframe src

$('#iframe_panel_wrapper').show().trigger('change');

или вы можете поместить триггер изменения в подсказку выше.