Struggling to implement a JavaScript action when a Bootstrap tab is opened. Unfortunately, the following scripts have not been successful:
$('.nav-tabs a').on('shown.bs.tab', function(){
vchart.redraw();
});
Also attempted:
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
$('.nav-tabs a').on('shown.bs.tab', function(){
vchart.redraw();
});
});
The scripts are within the tabs themselves. Tried:
$('ul.nav a').on('shown.bs.tab', function (e) {
instead of
$('.nav-tabs a').on('shown.bs.tab', function(){
Contains some HTML:
<div class="col-md-9">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#1">Tab 1</a>
</li>
<li>
<a data-toggle="tab" href="#2">Tab 2</a>
</li>
</ul>
</div>
<div id="1" class="tab-pane fade in active">
Tab 1 content...
</div>
<div id="2" class="tab-pane">
Tab 2 content...
</div>
Pondering what could be causing the issue?