当标签更改时,我尝试触发ajax调用。但是,我甚至无法让这个基本测试工作:
<ul class="nav nav-tabs">
<li class="">
<a data-toggle="tab" href="#gqs-uploader" id="gqs-uploader-btn">Upload</a>
</li>
<li class="active">
<a data-toggle="tab" href="#gqs-results" id="gqs-results-btn">Results</a>
</li>
<li class="">
<a data-toggle="tab" href="#gqs-download" id="gqs-download-btn">Download</a>
</li>
</ul>
和javascript:
(function ( $ ) {
"use strict";
$(function () {
$(document).on('shown', 'a[data-toggle="tab"]', function (e) {
alert('TAB CHANGED');
});
});
}(jQuery));
当任何标签更改时,它应该向我发送警报。
为什么这个简单的例子不起作用?
文档中的基本示例也不起作用。整个事件(甚至按钮点击)似乎都是看不见的 - 我似乎无法抓住它。
答案 0 :(得分:20)
试试这个
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
alert('TAB CHANGED');
})
答案 1 :(得分:2)
试试此代码,查看工作FIDDLE
<ul class="nav nav-tabs">
<li class="">
<a data-toggle="tab" href="#gqs-uploader" id="gqs-uploader-btn">Upload</a>
</li>
<li class="active">
<a data-toggle="tab" href="#gqs-results" id="gqs-results-btn">Results</a>
</li>
<li class="">
<a data-toggle="tab" href="#gqs-download" id="gqs-download-btn">Download</a>
</li>
</ul>
<script>
(function ( $ ) {
$(function () {
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
alert('TAB CHANGED');
});
});
}(jQuery));
</script>
答案 2 :(得分:0)
这是来自bootstrap文档: http://getbootstrap.com/javascript/#tabs
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
})
您有4个活动: 隐藏,显示,隐藏,显示