Pagination with custom query, custom search form, single and pages, ajax and no plugins

I’ve read a lot of posts here about pagination with custom queries and tried the suggested answers (like this one). It seems however that my situation is a little more complex, and in the existing questions people often mention pagination plugins which I don’t want to use (if possible).

I have a custom search form. The action URL and destination (results page) of the search form can be a page or one of several singular custom post type pages. This is all working as expected.

The pagination works when I directly go to the results page, but it doesn’t when I use the custom search form to input values. It does output the correct results though, because when I set posts_per_page to -1 I can see the correct results.

The problem

The thing is that when I click a page number, the div where the page should be loaded (through AJAX) stays empty.

The code

On the results page I have a custom query, which uses input from the search form:

$query = my_function($v1, $v2, $v3, $v4);

The arguments for the query are defined in the function:

function my_function($v1, $v2, $v3, $v4) {

    // The $v variables are used to create $args. It's a lot of code and there are several versions of $args. I'm not displaying this information here because the query itself is working like I've described above. 

    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

    $args = array(
        'post_type'         => 'events',
        'post_status'       => 'publish',
        'posts_per_page'    => 20,
        'paged'             => $paged,
        'meta_query'        => array($meta_query),
        'meta_key'          => 'date_from',
        'orderby'           => 'meta_value',
        'order'             => 'ASC',
    );

    return new WP_Query($args);
}

Then on the results page, after $query is defined:

if($query->have_posts()):
while ($query->have_posts()): $query->the_post();
   // Do stuff here
endwhile;

echo create_pagination($query);

endif; wp_reset_query();

The pagination function:

function create_pagination($query) {

    $big = 99999999;

    $args = array(
        'base' => str_replace($big, '%#%', get_pagenum_link($big)),
        'format' => '/page/%#%',
        'total' => $query->max_num_pages,
        'current' => max(1, get_query_var('paged')),
        'show_all' => false,
        'end_size' => 1,
        'mid_size' => 2,
        'prev_next' => true,
        'prev_text' => '<i class="icon-chevron-left"></i>',
        'next_text' => '<i class="icon-chevron-right"></i>',
        'type' => 'list'
    );

    return paginate_links($args);

}

And to top things off and make this even more complex :-), the code to use AJAX on pagination:

$('.listcontent').on('click', '#pgn a', function(e){
        e.preventDefault();
        var link = $(this).attr('href');
        $('.yt-listcontent').fadeOut(300, function(){
            $(this).load(link + ' .listcontent', function() {
                $(this).fadeIn(300);
            });
        });
    });

Please note: like I’ve described the query is working as expected, also when the using the custom search form. The pagination js above is also working. Like described for the query, the js works when I go to the results page and don’t enter information into the search form.

What happens is that when I enter information into the custom search form, the pagination is created (and the links also point to example.com/thecurrentpage/page/pagenumberhere) and shows up, even with the correct page links. But when a page link is clicked, the .listcontent div stays empty (fade effect is visible though).

I think there’s something wrong with my pagination settings and while I believe my form and query is right, the pagination is still a bit abracadabra to me.

UPDATE

After trying the code from this post as was suggested, the problem is still the same. The solution there uses the search query (hence the global $wp_query) so I think the problem has to with the custom query.