Bootstrap shown.bs.tab event not working

Question

I\'m using the Flexy template (using bootstrap) and I can\'t get the shown.bs.tab event on tab to work.

I\'ve managed to make it work on JSFiddle.

Here is the co

Answer 1

Bootstrap tab events are based off the .nav-tabs elements, not the .tab-content elements. So in order to tap into the show event, you need the element with an href that is pointed towards #tab1, not the #tab1 content element itself.

So instead of this:

$('#tab1').on('shown.bs.tab', function (e) {
    console.log("tab1");
});

Do this instead:

$('[href=#tab1]').on('shown.bs.tab', function (e) {
    console.log("tab1");
});

Or, to capture all of them, just do this:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  console.log(e.target.href);
})

Demo in Stack Snippets

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  console.log(e.target.href);
})

  

    
Tab 1
    
Tab 2
  
  

    
Tab 1 Content
    
Tabe 2 Content