Bootstrap event shown.bs.tab not working

Question

I am using the Flexy template (using bootstrap) and I cannot get the show.bs.tab tab event to work.

I managed to get it working on JSFiddle .

Here is the code that I use in my template that produces nothing:

<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> <script> $(function() { $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { alert(e.target.href); }) }); </script> 

What can i skip? If I copy / paste this code into Flexy code, this will not work. What are the steps to understand what is wrong? Thanks!

Answer 1

The problem was more related to rails .

In the end, I deleted each piece of code one by one, since the problem was not in the original template, as @KyleMit says.

Whenever I delete the line //= require bootstrap-sprockets from my application.js file, the problem goes away!

The problem was that I needed both bootstrap and bootstrap-sprockets . I would have to demand only one of them, but not both .

Answer 2

.nav-tabs tab events are based on .nav-tabs and not on .tab-content elements. Therefore, to #tab1 show event, you need an element with href that is directed to #tab1 , not the content element #tab1 .

So instead:

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

Do this instead:

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

Or, to capture all of them, simply do the following:

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

Demonstration in fragments of the stack

 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { alert(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> 

Answer 3

If the tab is dynamic, try using

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

Answer 4

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

I am solving a problem with jQuery.noConflict (). See below!

Hope this helps!

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