[Bootstrap tab events][1] 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);
    })



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

    <div role="tabpanel">
      <ul class="nav nav-tabs" role="tablist">
        <li class="active"><a id="tab1" href="#chart1" role="tab" data-toggle="tab">Tab 1</a></li>
        <li><a id="tab2" href="#chart2" role="tab" data-toggle="tab">Tab 2</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="chart1">Tab 1 Content</div>
        <div class="tab-pane" id="chart2">Tabe 2 Content</div>
      </div>
    </div>



[1]: http://getbootstrap.com/javascript/#tabs-events

I'm using the [Flexy template][1] (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][2].

Here is the code I use in my template that produce nothing :

    <div role="tabpanel">
      <ul class="nav nav-tabs" role="tablist">
        <li class="active"><a id="tab1" href="#chart1" role="tab" data-toggle="tab">Tab 1</a></li>
        <li><a id="tab2" href="#chart2" role="tab" data-toggle="tab">Tab 2</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="chart1">Tab 1 Content</div>
        <div class="tab-pane" id="chart2">Tabe 2 Content</div>
      </div>
    </div>
    
    <script>
      $(function() {
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
          alert(e.target.href);
        })
      });
    </script>

What can I miss ? If I copy/paste this code on the Flexy code it doesn't work. What are the steps to understand what is wrong ? Thanks !


  [1]: http://the8guild.com/themes/html/flexy/v1.7/stylesPage.html
  [2]: http://jsfiddle.net/st8h6a92/