AJAX numerical pagination problem in TwentyFifteen-child theme

I want to create an AJAX numeric pagination. And found code in a website. And it works perfectly at first click event, but on the second click it doesn't. If I click in pagination page 4, it works perfectly (And doesn't load page, because of ajax)

example.com/page/4/

but after the first click, if i click on the 5th page link over the pagination, the whole page loads (not as expected in ajax) will go to a blank page and url is:

example.com/wp-admin/admin-ajax.php/page/3/

php code for TwentyFifteen Child theme's function.php

if ( !function_exists( 'custom_style_script_enqueue' ) ) :

    function custom_style_script_enqueue() {
        global $wp_query;

        wp_enqueue_style( 'custom-stylesheet', get_theme_file_uri( 'css/custom-style.css' ), array( '' ), filemtime( get_theme_file_path( 'css/custom-style.css' ) ), 'all' );
        if ( ! wp_script_is( 'jquery', 'enqueued' ) ) {
            wp_enqueue_script( 'jquery' );
        }
        wp_register_script( 'custom-ajax-jscript', get_theme_file_uri( 'js/custom-ajax-jscript.js' ), array( 'jquery' ), filemtime( get_theme_file_path( 'js/custom-ajax-jscript.js' ) ), false );
        wp_localize_script( 'custom-ajax-jscript', 'ajaxpaginationobject', array(
            'ajax_url' = admin_url( 'admin-ajax.php' ),
            'query_vars' = json_encode( $wp_query-query )
        ) );
        wp_enqueue_script( 'custom-ajax-jscript' );
    }
    add_action( 'wp_enqueue_scripts', 'custom_style_script_enqueue' );

endif;


if ( !function_exists( 'my_ajax_custom_pagination' ) ) :

    function my_ajax_custom_pagination() {
        $query_vars = json_decode( stripslashes( $_POST['query_vars'] ), true );
        $query_vars['post_type'] = 'post';
        $query_vars['paged'] = $_POST['page'];
        $query_vars['post_status'] = 'publish';
        $query_vars['posts_per_page'] = 3;

        $posts = new WP_Query( $query_vars );
        $GLOBALS['wp_query'] = $posts;

        add_filter( 'editor_max_image_size', 'my_image_size_override' );

        if ( ! $posts-have_posts() ) {
            get_template_part( 'content', 'none' );
        } else {
            while( $posts-have_posts() ) {
                $posts-the_post();
                get_template_part( 'content', get_post_format() );
            }
        }
        wp_reset_postdata();
        remove_filter( 'editor_max_image_size', 'my_image_size_override' );

        the_posts_pagination( array(
            'prev_text' = __( 'Previous page', 'twentyfifteen' ),
            'next_text' = __( 'Next page', 'twentyfifteen' ),
            'before_page_number' = 'span class="meta-nav screen-reader-text"' . __( 'Page', 'twentyfifteen' ) . '/span',
        ) );

        die();

        function my_image_size_override() {
            return array( 825, 510 );
        }
    }

    add_action( 'wp_ajax_ajax_paginaton', 'my_ajax_custom_pagination' );
    add_action( 'wp_ajax_nopriv_ajax_paginaton', 'my_ajax_custom_pagination' );

endif;

And JS file custom-ajax-jscript.js

jQuery(document).ready(function($){
    function find_page_number( element ) {
        element.find('span').remove();
        return parseInt( element.html() );
    }

    // $( ".nav-links a" ).click( function(e) {
    // $(document).on( 'click', '.nav-links a', function(e) {
    $( "nav.navigation" ).on( "click", ".nav-links a", function(e) {
        e.preventDefault();

        page = find_page_number( $(this).clone() );

        $.ajax({
            url: ajaxpaginationobject.ajax_url,
            // type: 'POST', // I'll use 'method' instead of 'type' because my jquery version is NOT PRIOR then 1.9.0
            method: 'POST',
            data: {
                action: 'ajax_paginaton',
                query_vars: ajaxpaginationobject.query_vars,
                page: page
            },
            beforeSend: function() {
                $('#main').find( 'article' ).remove();
                $('#main nav').remove();
                $(document).scrollTop();
                $('#main').append( 'div class="page-content" id="loader"Loading New Posts.../div' );
            },
            success: function( html ) {
                $('#main #loader').remove();
                $('#main').append( html );
            }
        });
    });
});

Why second click does't work and include some extra part (/wp-admin/admin-ajax.php/) in middle of page link?

Please help me to solve this problem.