Zakładka "pokazany" nie uruchamia się zdarzenia - Twitter Bootstrap

Question

Gdy zmienia się zakładka, próbuję wywołać wywołanie ajax. Jednak nie mogę nawet wydaje się mieć ten podstawowy test pracy:

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

a javascript:

(function ($) { 
    "use strict"; 

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

}(jQuery)); 

przypadku jakichkolwiek zmian kartę, należy wysłać mi alert.

Dlaczego ten prosty przykład nie działa?

Podstawowy przykład w dokumentach również nie działa. Całe wydarzenie (nawet kliknięcia przycisku) wydaje się niewidoczne - nie mogę tego złapać w żaden sposób.

Answer 1

Spróbuj

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

Answer 2

Remove "use strict", który powoduje problem dla dalszego kodu do wykonywania:

(function ($) { 
    //"use strict"; // remove this line js doesn't use use strict as php 

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

}(jQuery)); 

Answer 3

Spróbuj tego kodu, należy sprawdzić pracę 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> 

Answer 4

To jest z dokumentacji 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 
}) 

Masz 4 zdarzenia: ukrywać, pokazywać, ukryte, pokazane