title: Bootstrap 3 jquery event for active pill change
body: <p>My goal is to overload Bootstrap nav pall click event, and I was happy to come across <a href="https://stackoverflow.com/questions/20705905/bootstrap-3-jquery-event-for-active-tab-change">this post</a></p>
  
  <p>I've modified the code the following way to make it work for pills, but I'm helpless to understand why it doesn't work.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul class="nav nav-pills" id="orders_tab"&gt;
                  &lt;li class="active"&gt;&lt;a data-toggle="pill" href="#orders_for_today"&gt;Текущие&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a data-toggle="pill" href="#orders_sent_to_vendors"&gt;Ожидающие&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a data-toggle="pill" href="#inventories"&gt;Остатки&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a data-toggle="pill" href="#sales"&gt;Продажи&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a data-toggle="pill" href="#sales_aggregate"&gt;Аггрегированные продажи&lt;/a&gt;&lt;/li&gt;
                  &lt;li role="presentation" class="dropdown"&gt;
                      &lt;a class="dropdown-toggle" data-toggle = "dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"&gt;
                        Прочее &lt;span class="caret"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt; 
                          &lt;li&gt;&lt;a href="#orders_products"&gt;Продукты&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt; 
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('a[data-toggle="pill"]').on('shown.bs.pill', function (e) {
          var target = $(e.target).attr("href") // activated tab
          alert(target);
      });
  </code></pre>