gpt4 book ai didi

javascript - 从 Bootstrap 选项卡捕获 'shown' 事件

转载 作者:行者123 更新时间:2023-12-03 21:34:11 24 4
gpt4 key购买 nike

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

在页面加载时,我创建一个选项卡“框架”,即创建 Bootstrap 选项卡和选项卡内容容器。

我通过以下方式触发该过程:

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

到目前为止一切顺利。我的页面加载,我的选项卡内容呈现,当我单击不同的选项卡时,会显示相关内容。

现在,我不想在开始时加载所有内容,而是想通过使用选项卡的“shown”事件来即时加载选项卡内容。为了测试这一点,我想确保在显示选项卡时我可以收到 JavaScript 警报。因此,我创建以下内容来触发选项卡显示事件的附件:

$(function () {
attachTabShownEvents();
})

调用:

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

因此,我希望在更改选项卡后看到“选项卡已更改”警报。但是...我没有看到任何警报。

有人可以帮我吗?

最佳答案

选项卡更改的正确事件绑定(bind)是 shown.bs.tab

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

2020 年 1 月 11 日更新 --- Bootstrap 4.5

这仍然是正确的答案,但是,这是在官方 Bootstrap 文档页面底部找到的一些额外的有用信息:https://getbootstrap.com/docs/4.5/components/navs/#tabs

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
})

您可以使用 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;
}
}
})

关于javascript - 从 Bootstrap 选项卡捕获 'shown' 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19741754/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com