Javascript 捕获'；所示为'；来自引导选项卡的事件

我的页面上有一些“静态”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>

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

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

这要求：

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

因此，我希望在更改TAB后看到“TAB CHANGED”警报。但是我没有看到警报

---

有人能帮我吗？

选项卡更改的正确事件绑定显示为

。bs.tab

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

更新11-01-2020---引导4.5

这仍然是正确的答案，但是，这是一点额外的有用信息，可以在官方引导文档页面的底部找到：

您可以确定每次使用

e.target

触发代码时选择的选项卡

如果元素上有唯一的ID，那么可以执行如下操作，这样代码只能在单击相应的选项卡时运行

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  switch (e.target.id){
      case "mainTab":{
           doMainTabStuff();
           break;
      }
      case "configTab":{
           doConfigTabStuff();
           break;
      }
  }
})

---

使用我的Nuget软件包在这里加载引导标签，非常简单， 只需将“lazyload”类添加到引导选项卡的“ul”元素中，然后将等于url的“dataurl”添加到任意选项卡锚元素（a）。就这样

---

我不喜欢“秀”和“秀”活动。我的解决方案并不是具体针对OP的情况，但一般的概念是存在的

我对引导强制自己的onclick事件也有同样的问题 在选项卡（菜单按钮和内容面板）上。我想根据单击的菜单按钮将内容延迟加载到面板中，一些按钮在当前页面上显示面板，另一些按钮将页面加载到iframe中

起初，我将数据填充到一个隐藏的表单字段标记中，这也是同样的问题。诀窍是发现某种变化并据此采取行动。我通过强制更改并使用备用事件监听按钮来解决问题，而无需触摸引导程序

1） 将iframe目标作为数据属性隐藏在按钮中：

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

2） 将备用事件绑定到fire off 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');

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

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

特殊选项卡内容
$（'a[data toggle=“tab”]”）。打开（'show.bs.tab'，函数（evt）{
var-anchor=$（evt.target）.attr（'href'）；
警报（“显示的选项卡=”+锚定）；
//根据显示的选项卡执行操作
如果（锚定==“某些特殊选项卡锚定”）{
//做我特别的事：）
}
});

您是否尝试过替换

$（窗口）.bind（“加载”，prepareDivisionTabs）与
$（prepareDivisionTabs）？我会试一试并报告回来，但由于在“prepareDivisionTabs”期间创建的选项卡工作正常，这部分过程目前似乎还不错。只是我尝试添加的后续事件处理程序不起作用。更新：刚刚做了建议的更改，行为是相同的（即选项卡在屏幕行为方面工作，但仍然不会触发“显示”事件）。哦，我相信事件绑定应该是
显示的。bs.tab
，而不是
显示的
“show.bs.tab”破解了它！非常感谢windy，这是一种方法。。。忽略上的大多数其他建议，使其不起作用；）您如何调整它以适用于一个特定选项卡？@Richard
$（选择器）。on（'show.bs.tab'，function（e）{alert（'tab CHANGED'）；}）
$（选择器）。on（'show.bs.tab'，function（e）{alert（'tab CHANGED'）；}）这一个不适用于我。$（选择器）是ul元素的父div很高兴我能提供帮助：）
$('#btn_for_iframe').on('mouseup',function(){
   console.log(this+' was activated');
   $('#iframe').attr('src',$('#btn_for_iframe').attr('data-url'));
});

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

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

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

            });