Why bootstrap tabs don't work when adding ajax content?

Question

JavaScript

There are tabs working on Bootstrap v3.3.5

In the second tab there is a select list, when one of the options is selected, Ajax loading is triggered on the change event, and the tab content is replaced with a new html block loaded from the server in which the form is located. Depending on the selected option, the appropriate form is loaded from the server.

The problem is that after Ajax loading, the tabs themselves stop switching, I can’t figure out what the problem is here. How to make tabs switch again after Ajax loading? It is possible that Ajax

HTMl - tab navigation code

<ul class="nav nav-tabs more-tabs">
          <li class="active"><a href="#index-information-1233" data-toggle="tab" aria-expanded="true">Отправить сообщение</a></li>
          <li class=""><a href="#index-information-2233" data-toggle="tab" aria-expanded="false">Информация</a></li>
</ul>

JS-code of the event when choosing the desired option in the select triggered by ajax

// добавляем форму при выборе типа сообщения для процесса 
$(document).on('change', '.message-code', function (event) {          
        message_block.initialize($(this)); // запускаем функцию которая по выбору из списка загружает нужную форму
              
});

I suspect that the error is in how I load the data received from the server into the tab. When I comment this line the folds work fine.

// код загрузки html блока в объекте message_block.initialize($(this));

…
$(parent).html('<div class="row"><div class="col-md-12 message-block">' + obj + '</div></div>');   
...