Javascript Bootstrap 显示.bs.tab 事件不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30468111/
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
Bootstrap shown.bs.tab event not working
提问by Stéphane
I'm using the Flexy template(using bootstrap) and I can't get the shown.bs.tab event on tab to work.
我正在使用Flexy 模板（使用引导程序），但无法使选项卡上的 Show.bs.tab 事件正常工作。
I've managed to make it work on JSFiddle.
我已经设法让它在JSFiddle 上工作。
Here is the code I use in my template that produce nothing :
这是我在模板中使用的代码，它不会产生任何结果：
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a id="tab1" href="#chart1" role="tab" data-toggle="tab">Tab 1</a></li>
<li><a id="tab2" href="#chart2" role="tab" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="chart1">Tab 1 Content</div>
<div class="tab-pane" id="chart2">Tabe 2 Content</div>
</div>
</div>
<script>
$(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
alert(e.target.href);
})
});
</script>
What can I miss ? If I copy/paste this code on the Flexy code it doesn't work. What are the steps to understand what is wrong ? Thanks !
我能错过什么？如果我将此代码复制/粘贴到 Flexy 代码上，则它不起作用。了解错误的步骤是什么？谢谢 ！
采纳答案by Stéphane
The issue was more a rails-related one.
这个问题更像是一个与 rails 相关的问题。
I ended up by removing one by one every piece of code since the issue was not there in the raw template as @KyleMit says.
我最终将每段代码一一删除，因为问题不存在于@KyleMit 所说的原始模板中。
Whenever I remove the line //= require bootstrap-sprocketsfrom my application.js file the issue disappears !
每当我//= require bootstrap-sprockets从 application.js 文件中删除该行时，问题就会消失！
The issue was that I was requiring both bootstrapand bootstrap-sprockets. I should have require just one of them but not both.
问题是我同时需要bootstrap和bootstrap-sprockets。我应该只需要其中之一，而不是两者。
回答by KyleMit
Bootstrap tab eventsare based off the .nav-tabselements, not the .tab-contentelements. So in order to tap into the show event, you need the element with an href that is pointed towards #tab1, not the #tab1content element itself.
Bootstrap 选项卡事件基于.nav-tabs元素，而不是.tab-content元素。因此，为了利用 show 事件，您需要带有指向 的 href 的元素#tab1，而不是#tab1内容元素本身。
So instead of this:
所以而不是这个：
$('#tab1').on('shown.bs.tab', function (e) {
console.log("tab1");
});
Do this instead:
改为这样做：
$('[href=#tab1]').on('shown.bs.tab', function (e) {
console.log("tab1");
});
Or, to capture all of them, just do this:
或者，要捕获所有这些，只需执行以下操作：
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log(e.target.href);
})
Demo in Stack Snippets
堆栈片段中的演示
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log(e.target.href);
})<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a id="tab1" href="#chart1" role="tab" data-toggle="tab">Tab 1</a></li>
<li><a id="tab2" href="#chart2" role="tab" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="chart1">Tab 1 Content</div>
<div class="tab-pane" id="chart2">Tabe 2 Content</div>
</div>
</div>回答by Leon
If the Tab is dynamic in anyway try using
如果 Tab 无论如何都是动态的，请尝试使用
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
alert(e.target.href);
})
回答by Jokova
In my case, there was a conflict between Jquery and Bootstrap.
就我而言，Jquery 和 Bootstrap 之间存在冲突。
I solved the problem with jQuery.noConflict(). See below!
我用 jQuery.noConflict() 解决了这个问题。见下文！
I hope that helps!
我希望这有帮助！
// Issue @ tabs toggle
jQuery.noConflict();
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
alert(e.target.href);
});
