UiKit Grid, Margin и Cover, не работающие на html, загружаются через ajax

Question

Я использую uikit для своего проекта.Я загружаю HTML-контент на веб-страницу через AJAX, используя код ниже.Страница загружается, когда выбрана опция выбора:

$('.myselect').change(function(){
  if($(this).val() == '1'){
    $('#ajax-content').load('http://localhost/sites/mysite/items.html');
  } 
});

items.html содержит следующий код:

<div class="uk-child-width-1-3@s uk-text-center uk-grid" uk-grid>
    <div>
        <div class="uk-cover-container">
        <canvas width="400" height="200"></canvas>
        <img src="images/img01.jpg" alt="" uk-cover>
        </div>
    </div>
    <div>
        <div class="uk-cover-container">
        <canvas width="400" height="200"></canvas>
        <img src="images/img02.jpg" alt="" uk-cover>
        </div>
    </div>
    <div>
        <div class="uk-cover-container">
        <canvas width="400" height="200"></canvas>
        <img src="images/img03.jpg" alt="" uk-cover>
        </div>
    </div>
</div>

Однако при загрузке uk-grid, uk-cover и uk-margin не работают должным образом, поскольку классы полей и полей (например, uk-first-column) не добавляются автоматически.

Есть ли способ обеспечить их инициализацию после загрузки ajax?

Answer 1

вызов следующего метода сразу после загрузки ajax html, обновление кодового блока

$('.myselect').change(function(){
  if($(this).val() == '1'){
    $('#ajax-content').load('http://localhost/sites/mysite/items.html', function(responseTxt, statusTxt, xhr){
     UIkit.update(element = document.body, type = 'update');
    });
  } 
});