title: Bootstrap "show.bs.tab" event with Durandal/Knockout
body: <p>I have tried various things for hours and cannot get this to work. Basically, I have a tabbed pane and I only want the contents of each pane to be loaded when the appropriate tab is active. The tabbed pane is in a durandal view.</p>
  
  <p>I tried a normal click event at first and that worked. The problem is that sometimes when navigating back to that screen, the tab that was last selected is still selected. Therefore no click-event is happening. I thought therefore that I would just use  the built-in triggered event from bootstrap - "show.bs.tab", to find out when the tab is becoming "active".</p>
  
  <p>Unfortunately no selector combination or anything I have tried works. I know that the trigger is being fired by bootstrap because I have debugged that. However, the event is not arriving at the event-listener which I have placed in my "compositionComplete" callback of my view-model - and I know that durandal goes in there because I have debugged that too.</p>
  
  <p>The odd thing is that when I place the listener code:</p>
  
  <pre><code>    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
      console.log('EVENT HAS ARRIVED! ', e);
  });
  </code></pre>
  
  <p>directly into the bootstrap file just above where the actual trigger gets fired, it works. Therefore there must be something preventing the event from arriving when it is in a durandal view-model. Is it durandal or is it knockout? Is there something that I have missed - something that I need to configure with durandal or knockout to get this working?</p>
  
  <p>I don't think the HTML is the problem, but just for the sake of completeness, I'll post  that too:</p>
  
  <pre><code>&lt;div class="col-md-10" id="view-details"&gt;
  
  &lt;form class="form-horizontal" role="form" data-observe="true"&gt;
  
      &lt;ul class="nav nav-tabs"&gt;
          &lt;li class="active"&gt;&lt;a data-target="#tab1" data-toggle="tab"&gt;Tab1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a data-target="#tab2" data-toggle="tab"&gt;Tab2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a data-target="#tab3" data-toggle="tab"&gt;Tab3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div class="tab-content"&gt;
          &lt;div class="tab-pane active" id="tab1" data-bind="compose:{ model: 'path/to/tabs/tab1', activationData: $root.someId}"&gt;&lt;/div&gt;
          &lt;div class="tab-pane" id="tab2" data-bind="compose:{ model: 'path/to/tabs/tab2', activationData: $root.someId}"&gt;&lt;/div&gt;
          &lt;div class="tab-pane" id="tab3" data-bind="compose:{ model: 'path/to/tabs/tab3', activationData: $root.someId}"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p></p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>Thanks,
  Michael </p>