Capturing 'shown' event from bootstrap tab

Question

I have some \'static\' HTML on my page:

    

        @* 
 nodes will b         


        
      

Answer 1

The correct event binding for tab change is shown.bs.tab.

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

Update 11-01-2020 --- Bootstrap 4.5

This is still the correct answer however, this is a bit of additional helpful information found all the way at the bottom of the official bootstrap docs page at: https://getbootstrap.com/docs/4.5/components/navs/#tabs

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

You can determine which tab has been selected each time the code fires with e.target.

If you have unique IDs on your elements then you could do something like the following so code only runs when the appropriate tab is clicked.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  switch (e.target.id){
      case "mainTab":{
           doMainTabStuff();
           break;
      }
      case "configTab":{
           doConfigTabStuff();
           break;
      }
  }
})