Здравствуйте! При использовании бутстрап табов столкнулся с проблемой.
Задача состоит в следующем, по клику на блок достаем его содержимое ( собственно сами табы ) и открываем бутстрап модалку, в модалку помещаем табы. Здесь и появляется проблема. Табы не работают корректно, переключаются только вкладки, содержимое вкладок - нет . Пытался решить эту проблему повторным запуском табов в открытой модалке на js, но безрезультатно. Как можно решить данную проблему? Подскажите пожалуйста, заранее спасибо)
$(document).ready(function () {
$('.catalog-item__img').on('click', function () {
const $content = $(this).siblings('.catalog-item__more').html();
$('.modal-body').html($content);
$('.modal').on('shown.bs.modal', function () {
$('.nav-tabs').click(function(e) {
e.preventDefault();
$(this).tab('show');
});
});
});
});
<div class="catalog-item__img" data-toggle="modal" data-target="#productModal">
<img src="images/products/1-TouchBinBo.jpg" alt="" width="100%">
</div>
<div class="catalog-item__more d-none">
<div>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</div>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">1</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">2</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">3</div>
</div>
</div>
</div>
<div id="productModal" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="productModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<button type="button" class="position-absolute close d-flex justify-content-center align-items-center" data-dismiss="modal">
<svg class="svg-icon">
<use xlink:href="images/sprite.svg#close"></use>
</svg>
</button>
<div class="modal-body"></div>
</div>
</div>
</div>
https://jsfiddle.net/furcifer2121/b6gad5vk/ 
