Tab “shown” event not firing - Twitter Bootstrap

问题:

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.

回答1:

Try this

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

回答2:

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>

回答3:

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