Вкладки начальной загрузки Ваниль JS показала, что событие не работает - PullRequest
Новая
       45

Вкладки начальной загрузки Ваниль JS показала, что событие не работает

0 голосов
/ 02 января 2019

Я пытаюсь определить, когда через Vanilla 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 не добавляет событие. Когда я нажимаю на вкладки, они не срабатывают.

Все журналы консоли показывают правильные элементы, только событие не вызывается при переключении между вкладками.

Ответы [ 2 ]

0 голосов
/ 02 января 2019

Согласно этому сообщению Переполнение стека , вы не можете использовать ".addEventListener" для пользовательских событий jQuery (например, "показано.bs.tab").

Я не могу сказать, почему jQueryВерсия ".on" не сработает.

0 голосов
/ 02 января 2019

Ваш 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>
...