Bootstrap Tabs Vanilla JS 显示事件不工作

Question

我正在尝试检测何时通过 Vanilla JS 显示选项卡并且事件不起作用。我查看了有关此的多个问题，其中 none 似乎有所帮助。这是我当前的代码。

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

你的 AddEventListener 是错误的，因为你没有告诉它你也想听什么事件。如果您想收听选项卡选择，您应该传递点击事件处理程序。

这里有一个 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>

Answer 2

根据此，您不能将“.addEventListener”用于自定义 jQuery 事件（例如 "shown.bs.tab"）。

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

Bootstrap Tabs Vanilla JS 显示事件不工作

Bootstrap Tabs Vanilla JS shown event not working

javascript

bootstrap-tabs

bootstrap-4