I'm currently utilizing uikit for a project and I've encountered an issue while loading html content into a webpage via ajax. Specifically, the page is loaded when a select option is chosen. Here's the code snippet responsible for this behavior:
$('.myselect').change(function(){
if($(this).val() == '1'){
$('#ajax-content').load('http://localhost/sites/mysite/items.html');
}
});
Within the items.html file, you'll find the following code:
<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>
After loading, it seems that the classes like uk-grid, uk-cover, and uk-margin are not functioning correctly, as margin and column classes (e.g. uk-first-column) are not automatically applied.
Any suggestions on how to make sure these are initialized after the ajax load?