选项卡“;显示“;事件未启动-推特引导

Tab "shown" event not firing - Twitter Bootstrap

本文关键字：显示 事件 选项 启动      更新时间：2023-09-26

当一个选项卡发生更改时，我正试图激发一个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));

当任何选项卡更改时，它应该向我发送警报。

为什么这个简单的例子不起作用

文档中的基本示例也不起作用。整个事件（甚至是按钮点击）看起来都是看不见的——我似乎无论如何都抓不住。

试试这个

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

尝试此代码，检查工作情况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>

这来自引导程序文档：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个活动：隐藏，显示，隐藏，显示

相关文章：