title: Trigger a jquery when a specific tab is active
body: <p>I'm trying to trigger a jquery event when a specific tab (payment) is active.</p>
  
  <p>Here the tab header:</p>
  
  <pre><code>&lt;ul class="nav nav-pills style2 nav-justified checkouttabs"&gt;
      &lt;li class="active"&gt;
          &lt;a href="#shopping-cart" data-toggle="tab"&gt;
              1. Cart
              &lt;div class="icon"&gt;
                  &lt;i class="fa fa-check"&gt;&lt;/i&gt;
              &lt;/div&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#billing-info" data-toggle="tab"&gt;
              2. shippinginformation
              &lt;div class="icon"&gt;
                  &lt;i class="fa fa-home"&gt;&lt;/i&gt;
              &lt;/div&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#payment" class="payment" data-toggle="tab"&gt;
              3. Checkout
              &lt;div class="icon"&gt;
                  &lt;i class="fa fa-credit-card"&gt;&lt;/i&gt;
              &lt;/div&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I tried checking to trigger the event when the tab i clicked like this:</p>
  
  <pre><code>$('.payment').on('click', function(e) {
  
      /*jquery event*/
  
  });
  </code></pre>
  
  <p>But this doesn't trigger on the first click, it only triggers when the tab is already open.</p>