从引导选项卡捕获“显示"事件 [英] Capturing 'shown' event from bootstrap tab
问题描述
我的页面上有一些静态" HTML:
I have some 'static' HTML on my page:
<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);
"prepareDivisionTabs"会执行以下操作:
And "prepareDivisionTabs" does this:
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"是这样做的:
For info, the "renderDivisionTabPaneContents" in the above does this:
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.
现在,我不想在开始时加载所有内容,而是希望通过使用选项卡的显示"事件来实时加载选项卡内容.为了对此进行测试,我只想确保在显示选项卡时可以收到JavaScript警报.因此,我创建以下代码来触发标签显示事件的附件:
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:
$(function () {
attachTabShownEvents();
})
哪个调用:
function attachTabShownEvents() {
$(document).on('shown', 'a[data-toggle="tab"]', function (e) {
alert('TAB CHANGED');
})
}
因此,我希望在更改标签后看到"TAB CHANGED"警报.但是...我没有看到任何警报.
I'd therefore expect so see the "TAB CHANGED" alert after the change of tab. But ... I see no alerts.
有人可以帮我吗?
推荐答案
选项卡更改的正确事件绑定是shown.bs.tab
.
The correct event binding for tab change is shown.bs.tab
.
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
alert('TAB CHANGED');
})
这篇关于从引导选项卡捕获“显示"事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!