Twitter 引导标签和 javascript 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8136904/
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
Twitter bootstrap tabs and javascript events
提问by Javaaaa
I am using twitter bootstrap for a project - in particular its tab functions (http://twitter.github.com/bootstrap/javascript.html#tabs)
我正在为一个项目使用 twitter bootstrap - 特别是它的选项卡功能（http://twitter.github.com/bootstrap/javascript.html#tabs）
Now I have this tablist and when I press the tab it switches to the content of each individual tab. However, this content is preloaded in the page (the html code for the content of all tabs is already there, you only change the visibility by pressing the tabs).
现在我有了这个选项卡列表，当我按下选项卡时，它会切换到每个单独选项卡的内容。但是，此内容已预加载到页面中（所有选项卡内容的 html 代码已经存在，您只需按选项卡更改可见性）。
However I want to only dynamically load content when a certain tab is pressed, so one will get the latest data instead of the data when the whole page was loaded.
但是，我只想在按下某个选项卡时动态加载内容，因此在加载整个页面时将获得最新数据而不是数据。
I am planning on using jQuery for this. However, how can I make it that when a tab is pressed a certain jquery function is called?
我打算为此使用 jQuery。但是，如何才能在按下选项卡时调用某个 jquery 函数？
I tried to show an alert when a tab was clicked (if that works, a jQuery function will too), but even that isn't working:
我试图在单击选项卡时显示警报（如果有效，jQuery 函数也将有效），但即使这样也不起作用：
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-tabs.js"></script>
<script type="text/javascript">
$(function() {
$('.tabs').bind('click', function (e) {
e.target(window.alert("hello"))
});
});
</script>
And my html:
还有我的 html：
<ul class="tabs" data-tabs="tabs">
<li class="active"><a href="#tab1">tab 1</a></li>
<li><a href="#tab2">tab 2</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="tab1">
<h1>Tab1</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="tab2">
<h1>Tab2</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
Any idea on how to make this work?
关于如何使这项工作的任何想法？
see this for the workings of twitter bootstrap tabs: (http://twitter.github.com/bootstrap/javascript.html#tabs) and the js file it uses: http://twitter.github.com/bootstrap/1.4.0/bootstrap-tabs.js
请参阅 twitter bootstrap 选项卡的工作原理：（http://twitter.github.com/bootstrap/javascript.html#tabs）及其使用的 js 文件：http: //twitter.github.com/bootstrap/1.4。 0/bootstrap-tabs.js
采纳答案by zatatatata
The bind seems to run before the DOM is ready. In addition, your selector seems to be broken and you can bind change only on select elements. You have to work around by clicking and implementing some logic. Try
绑定似乎在 DOM 准备好之前运行。此外，您的选择器似乎已损坏，您只能在选择元素上绑定更改。您必须通过单击并实现一些逻辑来解决。尝试
$(function() {
$('.tabs').bind('click', function (e) {
e.target(window.alert("hello"))
});
});
UPDATE
更新
After consulting with the documentation, it seems that your code was only missing the DOM ready part, the rest wasn't actually a bug, which means that according to the docs the following should work:
在查阅文档后，您的代码似乎只缺少 DOM 就绪部分，其余部分实际上并不是错误，这意味着根据文档，以下内容应该可以工作：
$(function() {
$('.tabs').bind('change', function (e) {
// e.target is the new active tab according to docs
// so save the reference in case it's needed later on
window.activeTab = e.target;
// display the alert
alert("hello");
// Load data etc
});
});
What caused confusion is that the plugin overrides default selector, making #.tabsvalid and also adding a change event to the tab element. Go figure why they decided this syntax was a great idea.
引起混淆的是该插件覆盖了默认选择器，使其#.tabs有效并向选项卡元素添加了更改事件。去弄清楚为什么他们认为这种语法是个好主意。
Anyways you can try the second sample and comment wether the alert is fired before or after the tab change.
无论如何，您可以尝试第二个示例并评论是否在选项卡更改之前或之后触发警报。
EDIT: fixed jquery exception caused by #.tabsselector
编辑：修复了由#.tabs选择器引起的 jquery 异常
回答by Mike Grace
With Twitter Bootstrap version 2 the documented way to subscribe to tab change eventsis
使用 Twitter Bootstrap 版本 2 ，订阅选项卡更改事件的记录方式是
$('a[data-toggle="tab"]').on('shown', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
})
The latest documentation on Twitter Bootstrap tab events can be found at http://getbootstrap.com/javascript/#tabs
可以在http://getbootstrap.com/javascript/#tabs上找到有关 Twitter Bootstrap 选项卡事件的最新文档
回答by Sheldon Cohen
If you are using 2.3.2 and it's not working, try using:
如果您使用的是 2.3.2 并且它不起作用，请尝试使用：
$(document).on("shown", 'a[data-toggle="tab"]', function (e) {
console.log('showing tab ' + e.target); // Active Tab
console.log('showing tab ' + e.relatedTarget); // Previous Tab
});
2.3.2 tabs usage: http://getbootstrap.com/2.3.2/javascript.html#tabs
2.3.2 标签使用：http: //getbootstrap.com/2.3.2/javascript.html#tabs
If you are playing with version 3 (currently RC2) then documentation shows
如果您使用的是版本 3（当前为 RC2），则文档显示
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log('showing tab ' + e.target); // Active Tab
console.log('showing tab ' + e.relatedTarget); // Previous Tab
})
RC2 Tabs Usage: http://getbootstrap.com/javascript/#tabs-usage
回答by Sadra Abedinzadeh
You can use the following snippet of code in bootstrap 3
您可以在引导程序 3 中使用以下代码片段
$(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
var activatedTab = e.target; // activated tab
})
回答by peroksid
Documentationsays: use event show.
文档说：使用 event show。
回答by Manticore
How about using click? Like this:
如何使用点击？像这样：
$('#.tabs').click(function (e) {
e.target(window.alert("hello"))
})
回答by mrlee
You have an error in your syntax relating to the selector:
您在与选择器相关的语法中有错误：
$('#.tabs') // should be ...
$('.tabs');
The unordered list has the classcalled 'tabs' in your HTML, whereas you were originally trying to select an element with the id'.tabs'.
无序列表在您的 HTML中有一个名为“tabs”的类，而您最初试图选择一个id 为“.tabs”的元素。
And you'll have to take manticore's suggestion into account too. You can only use 'change' on form elements.
而且你也必须考虑到manticore的建议。您只能在表单元素上使用“更改”。
$(document).ready(function() {
$('.tabs').click(function(e) {
e.preventDefault();
alert('tab clicked!');
});
});
