web-dev-qa-db-ja.com

bootstrapタブから「示された」イベントをキャプチャする

ページに「静的な」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>

ページの読み込み時に、タブ「フレームワーク」を作成します。つまり、bootstrapタブとタブコンテンツコンテナを作成します。

私はプロセスをトリガーします：

$(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」アラートが表示されることを期待しています。しかし...アラートは表示されません。

誰かがここで私を助けることができますか？

javascriptjquerytwitter-bootstraptabs
25
Neil W

タブ変更の正しいイベントバインディングはshown.bs.tab。

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    alert('TAB CHANGED');
})
77
azz
$(document).ready(function(){
    $(".nav-tabs a").click(function(){
        $(this).tab('show');
    });
    $('.nav-tabs a').on('shown.bs.tab', function(event){
        alert('tab shown');
    });
});
0
Stnfordly
<a data-toggle="tab" href="#some_special_tab_anchor">

<div id="some_special_tab_anchor" class="tab-pane fade">
    special tab content
</div>

            $( 'a[data-toggle="tab"]' ).on( 'shown.bs.tab', function( evt ) {

                var anchor = $( evt.target ).attr( 'href' );
                alert("TAB SHOWN = "+anchor);

                // take action based on what tab was shown
               if(anchor === "some_special_tab_anchor"){
                  // do my special thing :)
               }

            });
0
Stnfordly

LazyloadingにNugetパッケージを使用しますbootstrapタブ、非常にシンプル、単に "lazyload"クラスをbootstrap tabsの "ul"要素に追加してから、 「data-url」は、任意のタブアンカー要素（a）にロードするurlと等しい。

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

0
mesut

「show」および「show」イベントは機能しませんでした。私のソリューションは、OPの具体的な状況ではありませんが、一般的な概念はあります。

bootstrapタブ（メニューボタンとコンテンツパネル）で独自のonclickイベントを強制する）で同じ問題が発生しました。ボタンは現在のページにパネルを表示し、他のボタンはページをiframeにロードします。

最初は、データを隠しフォームフィールドタグに詰めましたが、これは同じ問題でした。秘trickは、何らかの変化を検出し、それに基づいて行動することです。変更を強制し、ブートストラップに触れることなくボタンでリッスンする代替イベントを使用することで問題を解決しました。

1）データ属性としてボタンにiframeターゲットを隠します：

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

2）代替イベントをthingyをオフにするためにバインドし、内部でiframeソースをスワップアウトします

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

3）パネルショーで「変更」イベントを強制し、iframe srcをロードする

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

または、上記のmouseupに変更トリガーを配置できます。

0
user3056442