Bootstrap 3 jquery event for active pill change
<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>