title: Capturing 'shown' event from bootstrap tab
body: <p>I have some 'static' HTML on my page:</p>
  
  <pre><code>&lt;div id="DIVISIONS"&gt;
      &lt;ul class="nav nav-tabs" id="DIVISIONTABS"&gt;
          @* &lt;li&gt; nodes will be injected here by javascript *@
      &lt;/ul&gt;
      &lt;div class="tab-content" id="DIVISIONTABPANES"&gt;
          @* &lt;div class="tab-pane"&gt; nodes will be injected here by javascript *@
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>On page load, I create a tab 'framework', i.e. create the bootstrap tabs and tab content containers.</p>
  
  <p>I trigger the process with:</p>
  
  <pre><code>$(window).bind("load", prepareDivisionTabs);
  </code></pre>
  
  <p>And "prepareDivisionTabs" does this:</p>
  
  <pre><code>function prepareDivisionTabs() {
      // Retrieve basic data for creating tabs
      $.ajax({
          url: "@Url.Action("GetDivisionDataJson", "League")",
          cache: false
      }).done(function (data) {
          var $tabs = $('#DIVISIONTABS').empty();
          var $panes = $('#DIVISIONTABPANES').empty();
          for (var i = 0; i &lt; data.length; i++) {
              var d = data[i];
              $tabs.append("&lt;li&gt;&lt;a href=\"#TABPANE" + d.DivisionId + "\" data-toggle=\"tab\"&gt;" + NMWhtmlEncode(d.Name) + "&lt;/a&gt;&lt;/li&gt;");
              $panes.append("&lt;div id=\"TABPANE" + d.DivisionId + "\" class=\"tab-pane\"&gt;&lt;/div&gt;")
          }
          renderDivisionTabPaneContents(data);
      }).fail(function (err) {
          alert("AJAX error in request: " + JSON.stringify(err, null, 2));
      });
  }
  </code></pre>
  
  <p>For info, the "renderDivisionTabPaneContents" in the above does this:</p>
  
  <pre><code>function renderDivisionTabPaneContents(data) {
      for (var i = 0; i &lt; data.length; i++) {
          var d = data[i];
          renderDivisionTabPaneContent(d.DivisionId);
      }
  }
  
  function renderDivisionTabPaneContent(id) {
      var $tabPane = $('#TABPANE' + id);
      $tabPane.addClass("loader")
      $.ajax({
          url: "/League/GetDivisionPartialView?divisionId=" + id,
          cache: false
      }).done(function (html) {
          $tabPane.html(html);
      }).fail(function (err) {
          alert("AJAX error in request: " + JSON.stringify(err, null, 2));
      }).always(function () {
          $tabPane.removeClass("loader")
      });
  }
  </code></pre>
  
  <p><strong>All good so far.</strong>  My page loads, my tab contents are rendered, and when I click the different tabs, the relevant content is shown.</p>
  
  <p>Now, rather than loading all content at the start, I want to load tab content just-in-time by using the 'shown' event of the tabs.  To test this, I've wanted to just make sure I could get a javascript alert when the tab was shown.  So, I create the following to trigger the attachment of tab shown events:</p>
  
  <pre><code>$(function () {
      attachTabShownEvents();
  })
  </code></pre>
  
  <p>which calls:</p>
  
  <pre><code>function attachTabShownEvents() {
      $(document).on('shown', 'a[data-toggle="tab"]', function (e) {
          alert('TAB CHANGED');
      })
  }
  </code></pre>
  
  <p>I'd therefore expect so see the "TAB CHANGED" alert after the change of tab.  But ... I see no alerts.  </p>
  
  <p>Could anybody help me out here?</p>