Isotope items reposition issue after append

I’m trying to set up Ajax post loading with Isotope. But I’m having trouble loading in the posts and displaying them in the grid. Loaded grid-items are either added to the top of the grid or are not positioned by Isotope.

Update! I’ve just noticed that on double click grid-items are positioned properly. But why not on the first click?

<div id="filters" class="button-group"></div>
<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Isotope setup

// init Isotope
var $grid = $('.grid').isotope({
    sortBy : 'random',
itemSelector: '.grid-item',
masonry: {
    columnWidth: 200
    },
sortAscending: {
    name: true,
    number: false,
    date: false,
},
getSortData: {
    name: '.name',
    date: '.date',
    number : '.number',
    category: '[data-category]',
}
});

load-posts.js

jQuery(document).ready(function($) {

    var pageNum = parseInt(rvidee_alp.startPage) + 1; // The number of the next page to load (/page/x/).    
    var max = parseInt(rvidee_alp.maxPages); // The maximum number of pages the current query can return.
    var nextLink = rvidee_alp.nextLink; // The link of the next page of posts.
    var grid = $('.grid'); // Posts container

    if(pageNum <= max) {
        $('.posts') // Insert the "More Posts" link.
            .append('<div class="col"><a id="load-posts" href="#0">Load more</a></div>');   
        $('.navigation').remove(); // Remove the traditional navigation.
    }

    $(document).on('click', '#load-posts', function(){

        if(pageNum <= max) { // Are there more posts to load?       
            $(this).text('Loading posts...');   
            $.get(nextLink, function(data){ 

                pageNum++;
                nextLink = nextLink.replace(//page/[0-9]?/, '/page/'+ pageNum);           
                $(data).find('.grid-item').appendTo(grid);

                    if(pageNum <= max) {
                        $('#load-posts').text('Load more');
                    } else {
                        $('#load-posts').text('No more to load.');
                    }
            });                         
        } else {
            $('#load-posts').append('.');
        }
        $('.grid').isotope( 'reloadItems').isotope();
        return false;   
    });

});

I figured I’d try to get (‘.grid-item’) data into variable so I could call for it under $(grid) but I couldn’t get it to work. Currently posts are added but Isotope is not positioning them.

Just let me know if you need to see the setup in functions.php.

Update! I’ve just noticed that on double click grid-items are positioned properly. But why not on the first click?