Bootstrap Tabs Vanilla JS shown event not working

Question

I am trying to detect when a tab is shown through Vanilla JS and the event isn't working. I have looked through multiple questions about this and none of them seem to help. Here is my current code.

var aTabs = document.querySelectorAll('a[data-toggle="tab"');
console.log(aTabs);
for (let i = 0; i < aTabs.length; i++) {
  console.log(aTabs[i].id);
  aTabs[i].addEventListener('shown.bs.tab', function(e) {
    console.log("Showing content for tab: " + e.target.href);
  }, false);
}

<ul class="nav nav-tabs" id="tab-navigation" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="1link" data-toggle="tab" href="#1" role="tab" aria-controls="community" aria-selected="true">1 <span class="badge badge-primary"></span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" id="2link" data-toggle="tab" href="#2" role="tab" aria-controls="2" aria-selected="false">2 <span class="badge badge-primary"></span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" id="3link" data-toggle="tab" href="#3" role="tab" aria-controls="3" aria-selected="false">3 <span class="badge badge-primary"></span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" id="4link" data-toggle="tab" href="#4" role="tab" aria-controls="4" aria-selected="false">4 <span class="badge badge-primary"></span></a>
  </li>
</ul>
<div class="tab-content" id="tab-navigation-content">
  <div class="tab-pane fade show active" id="1" role="tabpanel" aria-labelledby="tab1"></div>
  <div class="tab-pane fade" id="2" role="tabpanel" aria-labelledby="tab2"></div>
  <div class="tab-pane fade" id="3" role="tabpanel" aria-labelledby="tab3"></div>
  <div class="tab-pane fade" id="4" role="tabpanel" aria-labelledby="tab4"></div>
</div>

I have the console logs to make sure I am getting all the correct values and those are correct however the addEventListener isn't adding the event. When I click through tabs they do not trigger.

All the console logs show the correct elements, just the event isn't fired when switching between tabs.

BS requires jQuery in order to let few of its component work properly, so can't you just got with jQuery? — Yuri, Jan 02 '19 at 16:11
I dont want to use jQuery it to large of a library for no reason. — Alexander Beyer, Jan 02 '19 at 17:10

score 3 · Accepted Answer · answered Jan 02 '19 at 17:02

3

According to this Stack Overflow post, you cannot use ".addEventListener" for custom jQuery events (e.g. "shown.bs.tab").

I cannot say why the jQuery ".on" version wouldn't work, though.

answered Jan 02 '19 at 17:02

Rafael Martins

46
2

Looks like you are correct and hence my code not working, it looks like if I use a library like https://thednp.github.io/bootstrap.native/v4.html I can get the native functions instead of the jquery ones to work correctly. – Alexander Beyer Jan 02 '19 at 17:16

score 0 · Answer 2 · answered Apr 01 '23 at 20:28

in 2023, using Bootstrap 5.3 in FF 111.0.1, I had no problems with (addEventListener).

var tabEl = document.querySelectorAll('button[data-bs-toggle="tab"]');
for (let i = 0; i < tabEl.length; i++) {
   console.log(tabEl[i].id);
   tabEl[i].addEventListener('shown.bs.tab', function(e) {
     console.log("Showing content for tab: " + e.target.href);
   }, false);
}

score -1 · Answer 3 · answered Jan 02 '19 at 15:53

Your AddEventListener was wrong, as you weren't telling it what event you wanted to listen too. If you wanted to listen to the tab selection you should pass the click event handler.

Here is a JSFiddle as a sample http://jsfiddle.net/97nq823z/

var aTabs = document.querySelectorAll('a[data-toggle="tab"');
console.log(aTabs);
for (let i = 0; i < aTabs.length; i++) {
  console.log(aTabs[i].id);
  aTabs[i].addEventListener('click', writeToConsole(aTabs[i]));
}

function writeToConsole(tab) {
 console.log(tab);
}

<ul class="nav nav-tabs" id="tab-navigation" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="1link" data-toggle="tab" href="#1" role="tab" aria-controls="community" aria-selected="true">1 <span class="badge badge-primary"></span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" id="2link" data-toggle="tab" href="#2" role="tab" aria-controls="2" aria-selected="false">2 <span class="badge badge-primary"></span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" id="3link" data-toggle="tab" href="#3" role="tab" aria-controls="3" aria-selected="false">3 <span class="badge badge-primary"></span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" id="4link" data-toggle="tab" href="#4" role="tab" aria-controls="4" aria-selected="false">4 <span class="badge badge-primary"></span></a>
  </li>
</ul>
<div class="tab-content" id="tab-navigation-content">
  <div class="tab-pane fade show active" id="1" role="tabpanel" aria-labelledby="tab1"></div>
  <div class="tab-pane fade" id="2" role="tabpanel" aria-labelledby="tab2"></div>
  <div class="tab-pane fade" id="3" role="tabpanel" aria-labelledby="tab3"></div>
  <div class="tab-pane fade" id="4" role="tabpanel" aria-labelledby="tab4"></div>
</div>

If you want something more specific on the click you'll have to play around with what you want. If you want it to happen on the click itself you'll have to figure that out on your own. — Dylan Wright, Jan 02 '19 at 15:54
I am telling it what event I want it to follow. shown.bs.tab this is according to the documentation on bootstrap 4 — Alexander Beyer, Jan 02 '19 at 16:58

Bootstrap Tabs Vanilla JS shown event not working

3 Answers3