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.

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.

• javascript
• jquery
• html
• twitter-bootstrap

• What is your bootstrap version? – Hieu Le Commented Apr 22, 2014 at 6:03
• The bootstrap docs for the current version 3.1.1 mention that the tab shown event name is shown.bs.tab – Tim Commented Apr 22, 2014 at 6:04

3 Answers 3

Try this

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

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>

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