jQuery 从引导选项卡捕获“显示”事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19741754/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Capturing 'shown' event from bootstrap tab
提问by Neil W
I have some 'static' HTML on my page:
我的页面上有一些“静态”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>
On page load, I create a tab 'framework', i.e. create the bootstrap tabs and tab content containers.
在页面加载时，我创建了一个选项卡“框架”，即创建引导选项卡和选项卡内容容器。
I trigger the process with:
我通过以下方式触发该过程：
$(window).bind("load", prepareDivisionTabs);
And "prepareDivisionTabs" does this:
而“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));
});
}
For info, the "renderDivisionTabPaneContents" in the above does this:
有关信息，上面的“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")
});
}
All good so far.My page loads, my tab contents are rendered, and when I click the different tabs, the relevant content is shown.
到目前为止一切都很好。我的页面加载，我的选项卡内容被呈现，当我单击不同的选项卡时，会显示相关内容。
Now, rather than loading all content at the start, I want to load tab content just-in-time by using the 'shown' event of the tabs. To test this, I've wanted to just make sure I could get a javascript alert when the tab was shown. So, I create the following to trigger the attachment of tab shown events:
现在，我不想在开始时加载所有内容，而是想通过使用选项卡的“显示”事件及时加载选项卡内容。为了测试这一点，我只想确保在显示选项卡时可以收到 javascript 警报。因此，我创建以下内容来触发选项卡显示事件的附件：
$(function () {
attachTabShownEvents();
})
which calls:
其中调用：
function attachTabShownEvents() {
$(document).on('shown', 'a[data-toggle="tab"]', function (e) {
alert('TAB CHANGED');
})
}
I'd therefore expect so see the "TAB CHANGED" alert after the change of tab. But ... I see no alerts.
因此，我希望在更改选项卡后看到“TAB CHANGED”警报。但是......我看不到警报。
Could anybody help me out here?
有人可以帮我吗？
回答by azz
The correct event binding for tab change is shown.bs.tab.
选项卡更改的正确事件绑定是shown.bs.tab.
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
alert('TAB CHANGED');
})
回答by 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 :)
}
});
回答by mesut
Use my Nuget package for lazyloading bootstrap tabs here, its very simple, just add "lazyload" class to the "ul" element of bootstrap tabs, then add "data-url" equal to url to load to the any tabs anchor element (a). thats it.
在这里使用我的 Nuget 包延迟加载引导标签，它非常简单，只需将“lazyload”类添加到引导标签的“ul”元素，然后添加等于 url 的“data-url”以加载到任何标签锚元素（a ）。就是这样。
https://www.nuget.org/packages/MT.BootstrapTabsLazyLoader.js/
https://www.nuget.org/packages/MT.BootstrapTabsLazyLoader.js/
回答by user3056442
'show' and 'shown' events didn't work for me. My solution is not exactly specifically OP's situation, but the general concepts are there.
'show' 和 'shown' 事件对我不起作用。我的解决方案并不完全是 OP 的具体情况，但一般概念都在那里。
I had the same issue with bootstrap forcing its own onclick events on tabs (menu buttons and content panels). I wanted to lazy load stuff into a panel depending on what menu button was clicked, and some buttons show a panel on the current page, others were to load a page into an iframe.
引导程序在选项卡（菜单按钮和内容面板）上强制执行自己的 onclick 事件时，我遇到了同样的问题。我想根据单击的菜单按钮将内容延迟加载到面板中，一些按钮在当前页面上显示一个面板，其他按钮将页面加载到 iframe 中。
At first, I stuffed data into a hidden form field tag, which was the same issue. The trick is to detect some sort of change and act on that. I solved the problem by forcing a change and using an alternate event listening on the buttons without having to touch bootstrap.
一开始，我把数据塞进了一个隐藏的表单域标签，也是同样的问题。诀窍是检测某种变化并采取行动。我通过强制更改并使用备用事件侦听按钮解决了这个问题，而无需触摸引导程序。
1) stash iframe target in button as data attribute:
1) 将 iframe 目标存储在按钮中作为数据属性：
$('#btn_for_iframe').attr('data-url',iframeurl);
2) bind alternate event onto fire off thingy, and inside, swap out the iframe source
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) force 'change' event on panel shows, then load iframe src
3) 在面板显示上强制 'change' 事件，然后加载 iframe src
$('#iframe_panel_wrapper').show().trigger('change');
or you can put the change trigger in the mouseup above.
或者您可以将更改触发器放在上面的 mouseup 中。
回答by Stnfordly
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
$('.nav-tabs a').on('shown.bs.tab', function(event){
alert('tab shown');
});
});
