JavaScript-действие на открытой вкладке BS

Question

Я пытаюсь выполнить действие Javascript, когда открыта вкладка начальной загрузки.Я не могу заставить его работать.Вот сценарии, которые я пробовал:

$('.nav-tabs a').on('shown.bs.tab', function(){
    vchart.redraw();
});

И

$(document).ready(function(){
    $(".nav-tabs a").click(function(){
        $(this).tab('show');
    });
    $('.nav-tabs a').on('shown.bs.tab', function(){
        vchart.redraw();
    });
});

У меня есть эти сценарии внутри самих вкладок.Я также попробовал:

$('ul.nav a').on('shown.bs.tab', function (e) {

вместо

$('.nav-tabs a').on('shown.bs.tab', function(){

Некоторый 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>

Что происходит?

Answer 1

Вы должны привязать событие (addEventListener в терминах vanilla js)

$('ul.nav a').bind('click', function() { //bind whatever event you want 
  alert('User clicked on "foo."');
  //vchart.redraw();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>