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警报。因此，我创建以下内容以触发标签显示事件的附件：

$(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');
})

Answer 2

使用我的Nuget包在这里延迟加载引导选项卡，非常简单，只需添加＆＃34; lazyload＆＃34;上课到＆＃34; ul＆＃34;引导标签的元素，然后添加＆＃34; data-url＆＃34;等于url加载到任何标签锚元素（a）。就是这样。

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

Answer 3

'show'和'shows'事件对我不起作用。我的解决方案并非完全具体是OP的情况，但一般概念都存在。

我遇到了与bootstrap强制执行onclick事件相同的问题在选项卡上（菜单按钮和内容面板）。我想根据点击的菜单按钮将懒物加载到面板中，一些按钮在当前页面上显示一个面板，其他按钮则将页面加载到iframe中。

首先，我将数据填充到隐藏的表单字段标记中，这是同样的问题。诀窍是检测某种变化并采取行动。我通过强制更改并使用备用事件监听按钮而不必触摸引导程序来解决问题。

1）将按钮中的iframe目标存储为数据属性：

presentation

2）将备用事件绑定到火上，在里面，换掉iframe源

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

3）在面板节目上强制'更改'事件，然后加载iframe src

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

或者您可以将更改触发器放在上面的鼠标中。

Answer 4

$(document).ready(function(){
    $(".nav-tabs a").click(function(){
        $(this).tab('show');
    });
    $('.nav-tabs a').on('shown.bs.tab', function(event){
        alert('tab shown');
    });
});

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

5 个答案: