Как переписать jquery функцию на чистый js для отображения карты в bootstrap tabs?

Question

[DragonChris]

У меня возникла проблема с bootsrap tabs и отображением карты на второй кнопке.
Она решается следующим образом :

$("a[href='#tab-2']").on('shown.bs.tab', function(){
          google.maps.event.trigger(map, 'resize');
        });

Так как я стараюся писать на чистом js, то я не хочу использовать ее в своем коде.
Написал следуущее:

document.querySelector("a[href='#tab-2']").addEventListener('shown.bs.tab', function(e){
          google.maps.event.trigger(map, 'resize');
        });

Разметка:

<div class="tabs-container">
                        <ul class="nav nav-tabs">
                            <li class=""><a data-toggle="tab" href="#tab-1" aria-expanded="false"> This is tab</a></li>
                            <li class="active"><a data-toggle="tab" href="#tab-2" aria-expanded="true">This is second tab</a></li>
                        </ul>
                        <div class="tab-content">
                            <div id="tab-1" class="tab-pane">
                                <div class="panel-body">
                                  content
                                </div>
                            </div>
                            <div id="tab-2" class="tab-pane active">
                                <div class="panel-body">
                                  <div id="mapAdmin"></div>
                                </div>
                            </div>
                        </div>
                    </div>

Думал этот код на js тоже что и на jq...
Подскажите почему не срабатывает js-ный eventListner.
Спасибо заранее)

Comments

[kulaeff]

Причины разные могут быть. Возможно querySelector не отработал. Дайте вашу разметку. А еще лучше, сделайте рабочий пример на jsfiddle или еще где.

[DragonChris]

querySelector срабатывает с action click так:

document.querySelector("a[href='#tab-2']").parentNode.addEventListener('click, function(e){
          alert(1);
        });

Прикрепил разметку

Answer 1

[Максим Тимофеев]

Так как я стараюся писать на чистом js

А смысл если уже подключен jquery для boostrap? Тогда найдите табы на чистом js. Отказ от jquery в одном месте, и подключение в другом странная затея. Хотите минимализма - откажитесь от bootstrap js используй только css от них. Можете переписать логику табов без jquery.

Comments

[DragonChris]

Отказатся от jquery не получится, так как его использует админская тема, которую я использую. Написать табы то я могу, но мне интересно, почему с jq работает на js нет. И на js я пишу больше для лучшего понимания языка.