Edgar Navasardyan Edgar Navasardyan - 1 year ago 159
jQuery Question

Bootstrap 3 jquery event for active pill change

My goal is to overload Bootstrap nav pall click event, and I was happy to come across this post

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.


<ul class="nav nav-pills" id="orders_tab">
<li class="active"><a data-toggle="pill" href="#orders_for_today">Текущие</a></li>
<li><a data-toggle="pill" href="#orders_sent_to_vendors">Ожидающие</a></li>
<li><a data-toggle="pill" href="#inventories">Остатки</a></li>
<li><a data-toggle="pill" href="#sales">Продажи</a></li>
<li><a data-toggle="pill" href="#sales_aggregate">Аггрегированные продажи</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle = "dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Прочее <span class="caret"></span>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#orders_products">Продукты</a></li>


$('a[data-toggle="pill"]').on('shown.bs.pill', function (e) {
var target = $(e.target).attr("href") // activated tab

Answer Source

In Bootstrap nav-pills aka is a styling component not an js component. So data-toggle will be data-toggle="tab".

Update Fiddle for your code Fiddle


only change required.

-Help :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download