I am struggling to identify when a tab is displayed using Vanilla JS, but the event doesn't seem to be working. Despite researching various solutions, none of them have been helpful in resolving this issue. Here's my current code snippet.
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>
// Remaining list items abbreviated for brevity
</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>
// Remaining tab elements abbreviated for brevity
</div>Although all console logs indicate correct values, the addEventListener method isn't being attached to the tabs. As a result, clicking through different tabs fails to trigger the event as expected.
While the console outputs display accurate information about elements, the event simply does not fire upon switching between tabs.