引导选项卡香草JS显示事件不起作用

Question

我正在尝试检测何时通过香草JS显示选项卡并且事件不起作用。我已经浏览了有关此的多个问题，但似乎都没有帮助。这是我当前的代码。

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>

我

有控制台日志来确保我获得所有正确的值，并且这些值是正确的，但是addEventListener没有添加事件。当我单击选项卡时，它们不会触发。

所有控制台日志都显示正确的元素，只是在选项卡之间切换时不会触发事件。

Answer 1

根据这篇 Stack Overflow 帖子，您不能将".addEventListener"用于自定义 jQuery 事件（例如"display.bs.tab"）。

不过，我不能说为什么jQuery".on"版本不起作用。

Answer 2

> 在 2023 年，使用 FF 5.3 中的 Bootstrap 111.0.1，我对 （ 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);
}

Answer 3

你的 AddEventListener 是錯誤的，因為你沒有告訴它你想聽什麼事件。 如果要侦听选项卡选择，则应传递 click 事件处理程序。

下面是一个 JSFiddle 作为示例 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>