Вкладки Bootstrap не работают в шаблонах Django, если они генерируются динамически с использованием данных словаря. ⇐ Jquery

[Anonymous]

Я использую Bootstrap4 для создания вкладок в шаблоне django. Атрибуты id навигационной ссылки и панели вкладок генерируются с использованием словаря. Вот код

Код: Выделить всё

[list]
{% for MD, MDvals in MDdata.items %}
{% with forloop.counter as MDCnt %}
[*]
[url=#{{MDCnt}}]{{MD}}
[/url]

{% endwith %}
{% endfor %}
[*]
[url=#tab1]Tab 1[/url]

[*]
[url=#tab2]Tab 2[/url]

[*]
[url=#tab3]Tab 3[/url]

[/list]


{% for MD, MDvals in MDdata.items %}
{% with forloop.counter as MDCnt %}

Content for tab XXX {{MD}} XXX

{% endwith %}
{% endfor %}

Content for Tab 1

Content for Tab 2

Content for Tab 3

Части кода tab1, tab2 и tab3 взяты из руководства Bootstrap и работают правильно. Когда я нажимаю на ссылку tab1, она показывает правильное содержимое вкладки. Однако всякий раз, когда я нажимаю на любую из ссылок, созданных с использованием словаря MDData, она не работает. Класс навигационной ссылки изменится на «активный», а выбранный арией станет «истина». Однако содержимое вкладки не меняется на «показать активное». На той же странице до и после этой части вкладки широко используется Bootstrap-4, и она работает правильно.
Изменить: я также обнаружил, что мне нужно использовать следующий код JavaScript для включения вкладок.

Код: Выделить всё

$(document).ready(function() {
$('#v-tabs a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
});
});

Этот код тоже не работает.

Подробнее здесь: https://stackoverflow.com/questions/792 ... y-using-di