title: Bootstrap shown.bs.tab event not working
body: <p>I'm using the <a href="http://the8guild.com/themes/html/flexy/v1.7/stylesPage.html" rel="noreferrer">Flexy template</a> (using bootstrap) and I can't get the shown.bs.tab event on tab to work.</p>
  
  <p>I've managed to make it work on <a href="http://jsfiddle.net/st8h6a92/" rel="noreferrer">JSFiddle</a>.</p>
  
  <p>Here is the code I use in my template that produce nothing :</p>
  
  <pre><code>&lt;div role="tabpanel"&gt;
    &lt;ul class="nav nav-tabs" role="tablist"&gt;
      &lt;li class="active"&gt;&lt;a id="tab1" href="#chart1" role="tab" data-toggle="tab"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a id="tab2" href="#chart2" role="tab" data-toggle="tab"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class="tab-content"&gt;
      &lt;div class="tab-pane active" id="chart1"&gt;Tab 1 Content&lt;/div&gt;
      &lt;div class="tab-pane" id="chart2"&gt;Tabe 2 Content&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
    $(function() {
      $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        alert(e.target.href);
      })
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>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 !</p>