Действие JavaScript на вкладке BS открыто

Я пытаюсь выполнить действие Javascript при открытии вкладки начальной загрузки. Я не могу заставить его работать. Это сценарии, которые я пробовал:

$('.nav-tabs a').on('shown.bs.tab', function(){
    vchart.redraw();
});

И

$(document).ready(function(){
    $(".nav-tabs a").click(function(){
        $(this).tab('show');
    });
    $('.nav-tabs a').on('shown.bs.tab', function(){
        vchart.redraw();
    });
});

У меня эти скрипты внутри самих вкладок. Я также пробовал:

$('ul.nav a').on('shown.bs.tab', function (e) {

вместо

$('.nav-tabs a').on('shown.bs.tab', function(){

Немного HTML

<div class = "col-md-9">
  <ul class = "nav nav-tabs">
    <li class = "active">
      <a data-toggle = "tab" href = "#1">Tab 1</a>
    </li>
    <li>
      <a data-toggle = "tab" href = "#2">Tab 2</a>
    </li>
  </ul>
</div>

<div id = "1" class = "tab-pane fade in active">
  Tab 1 content...
</div>
<div id = "2" class = "tab-pane">
  Tab 2 content...
</div>

Что здесь происходит?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
83
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы должны связать событие (addEventListener с точки зрения vanilla js)

$('ul.nav a').bind('click', function() { //bind whatever event you want 
  alert('User clicked on "foo."');
  //vchart.redraw();
});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "col-md-9">
  <ul class = "nav nav-tabs">
    <li class = "active">
      <a data-toggle = "tab" href = "#1">Tab 1</a>
    </li>
    <li>
      <a data-toggle = "tab" href = "#2">Tab 2</a>
    </li>
  </ul>
</div>

<div id = "1" class = "tab-pane fade in active">
  Tab 1 content...
</div>

Это помогло. Спасибо за помощь. Я не знал, что должен использовать addEventListener.

Nour 20.01.2019 03:42

Можете ли вы сказать мне, могу ли я загрузить <div> с определенным идентификатором при открытии вкладки с частью приведенного выше сценария?

Nour 20.01.2019 04:16

Да, но только если открыта конкретная вкладка. Я использую диаграмму javascript, которую нужно загружать только тогда, когда вкладка фактически открыта.

Nour 20.01.2019 04:23

Я пытаюсь решить проблему новым подходом, но функция перерисовки почему-то не выполняет свою работу. Знаете ли вы какие-либо другие решения этой проблемы? stackoverflow.com/questions/54172274/…

Nour 20.01.2019 05:02

Другие вопросы по теме