Tab "shown" event not firing - Twitter Bootstrap

Question

When a tab changes, I'm attempting to fire an ajax call. However, I can't even seem to get this basic test to work:

<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>

And the javascript:

(function ( $ ) {
    "use strict";

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

}(jQuery));

When ANY tab changes, it should send me an alert.

Why is this simple example not working?

The basic example in the docs does not work either. The entire event (even button clicks) seems invisible - I can't seem to catch it any way.

The bootstrap docs for the current version 3.1.1 mention that the tab shown event name is `shown.bs.tab` — Tim, Apr 22 '14 at 06:04

score 20 · Accepted Answer · answered Apr 22 '14 at 06:09

20

Try this

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

answered Apr 22 '14 at 06:09

Chetan Gawai

2,361
1
25
36

This was it, - a silly oversight on my part - reading docs for wrong version. – Orangeman555 Apr 22 '14 at 06:12
2

Interestingly, [the solution for this SO question](http://stackoverflow.com/questions/20705905/bootstrap-3-jquery-event-for-active-tab-change), which is the first result for google keywords "tab change event bootstrap" did not fire the event for my AngularJS code. However, this solution successfully fired the event. – chakeda Mar 07 '16 at 22:55

score 2 · Answer 2 · answered Apr 22 '14 at 06:18

Try this code, check working 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>

score 1 · Answer 3 · answered Dec 08 '14 at 09:30

This is from the bootstrap documentation: 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
})

You have 4 events: hide, show, hidden, shown

Tab "shown" event not firing - Twitter Bootstrap

3 Answers3

Linked