Scheda "mostrato" evento non viene attivato - Twitter Bootstrap

Question

Quando una scheda cambia, sto tentando di eseguire una chiamata Ajax. Tuttavia, non posso nemmeno sembrano avere questo test di base per il lavoro:

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

E il javascript:

(function ($) { 
    "use strict"; 

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

}(jQuery)); 

quando uno cambia scheda, mi devono inviare un avviso.

Perché questo semplice esempio non funziona?

L'esempio di base nei documenti non funziona neanche. L'intero evento (anche i clic sui pulsanti) sembra invisibile: non riesco a percepirlo in alcun modo.

Answer 1

Prova questa

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

Answer 2

Rimuovi "use strict", che sta causando problemi per un ulteriore codice da eseguire:

(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

provare questo codice, controllare lavorando 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

Questo è dalla documentazione di 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 
}) 

hai 4 eventi: nascondere, mostrare, nascosta, mostrate