Bootstrap Shown.bs.tab Event Not Working

Answer :

Bootstrap tab events are based off the .nav-tabs elements, not the .tab-content elements. So in order to tap into the show event, you need the element with an href that is pointed towards #tab1, not the #tab1 content element itself.

So instead of this:

$('#tab1').on('shown.bs.tab', function (e) {     console.log("tab1"); }); 

Do this instead:

$('[href=#tab1]').on('shown.bs.tab', function (e) {     console.log("tab1"); }); 

Or, to capture all of them, just do this:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {   console.log(e.target.href); }) 

Demo in Stack Snippets

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {   console.log(e.target.href); })

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>  <div role="tabpanel">   <ul class="nav nav-tabs" role="tablist">     <li class="active"><a id="tab1" href="#chart1" role="tab" data-toggle="tab">Tab 1</a></li>     <li><a id="tab2" href="#chart2" role="tab" data-toggle="tab">Tab 2</a></li>   </ul>   <div class="tab-content">     <div class="tab-pane active" id="chart1">Tab 1 Content</div>     <div class="tab-pane" id="chart2">Tabe 2 Content</div>   </div> </div>

If the Tab is dynamic in anyway try using

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {          alert(e.target.href);     }) 

In my case, there was a conflict between Jquery and Bootstrap.

I solved the problem with jQuery.noConflict(). See below!

I hope that helps!

// Issue @ tabs toggle  jQuery.noConflict(); $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {     alert(e.target.href); });