title: bootstrap tabs: subscribe to an event
body: <p>my knowledge of js is very limited. I've already read the official docs and several threads on the web. Still I have some issues. I need to programmatically shows the tabs, because I have to do some operations when a tab is shown.</p>
  
  <p>According to the twitter bootstrap documentation, here a small piece of code:</p>
  
  <pre><code>    &lt;ul id="tabs" class="nav nav-tabs"&gt;
          &lt;li&gt;&lt;a href="#state"&gt;State&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#graph"&gt;Graph&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#setup"&gt;Setup&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="tab-content"&gt;
          &lt;div id="state" class="tab-pane fade"&gt;
          &lt;/div&gt;
          &lt;div id="graph" class="tab-pane fade"&gt;
          &lt;/div&gt;  
          &lt;div id="setup" class="tab-pane fade"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $('#tabs a').click(function (e) {
    e.preventDefault();
    console.log("Activating a tab");
    $(this).tab('show');
  })
  
  $('a[data-toggle="tab"]').on('shown', function (e) {
      console.log("Tab activated");
      e.target // activated tab
      e.relatedTarget // previous tab
  })
  &lt;/script&gt;
  </code></pre>
  
  <p>The first script activate each tab - and it's working.
  The second one should subscribe to the 'shown' event and e.target should contain the activated tab's reference.</p>
  
  <p>I get the first console message ("Activating a tab") but not the second. So I bet there is something I'm missing to correctly subscribing to the event.</p>
  
  <p>Two problems I cannot understand. In order to get the stuff working I can't use js to activate tabs but just rely on bootstrap data-toggle item. The other strange thing is only the 'show' event will fire, the 'shown' won't. Do you know why?</p>