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

我的页面上有一些“静态”HTML：

 
 @* 
 nodes will be injected here by javascript *@ 
 
 @* 
 nodes will be injected here by javascript *@ 
  

在页面加载时，我创建了一个选项卡’框架’，即创建引导选项卡和选项卡内容容器。

我触发了这个过程：

 $(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("
" + NMWhtmlEncode(d.Name) + "
"); $panes.append("
") } 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警报。 因此，我创建以下内容以触发tab显示事件的附件：

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

‘show’和’shows’事件对我不起作用。 我的解决方案并非完全具体是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'); 

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

Answer 3

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

Answer 4

 $( '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_specail_anchor"){ // do my special thing :) } }); 

Answer 5

使用我的Nuget包在这里延迟加载引导选项卡，它非常简单，只需将“lazyload”类添加到引导选项卡的“ul”元素，然后添加“data-url”等于url以加载到任何选项卡锚元素（a ）。 而已。

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