ajax load posts as full page slides

Question

I've been scratching my head over this and wondering if anyone has a solution. Effectively I'm creating a full viewport slider that dynamically loads the posts into a hidden div that is then animated into the page based on the direction the arrow is clicked. I can get the hidden div to animate in, however the script stops running after the first click so all other posts are not getting pulled in.

HTML/PHP:

// First Div that hold all loaded data
<div id="Default" class="main">
    <div id="fullContent">
        <?php while ( have_posts() ) : the_post(); ?>
            <?php the_title(); ?>
            <?php the_content(); ?>
        <?php endwhile; ?>

        <div class="leftArrow">
            <?php previous_post_link_plus( array('format' => '%link', 'order_by' => 'menu_order', 'loop' => true) ); ?>
        </div>
        <div class="rightArrow">
            <?php next_post_link_plus( array('format' => '%link', 'order_by' => 'menu_order', 'loop' => true) ); ?>
        </div>
    </div>
</div>

// Second div where new content will be loaded
<div id="LoadAjax" class="direction"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

JQUERY

$.ajaxSetup({cache:false});

    $('body').on('click', '.rightArrow a', function(e){
        e.preventDefault();
        history.pushState({ path: this.path }, '', this.href);
        $('.direction').hide();
        RightSlide(this);
        return false;
    });

    $('body').on('click', '.leftArrow a', function(e){
        e.preventDefault();
        $('.direction').hide();
        history.pushState({ path: this.path }, '', this.href);
        LeftSlide(this);
        return false;
    });

    function RightSlide(that) {
        var post_id = $(that).attr('href');
        $('.direction').load(post_id + ' #fullContent', function(){

            // Animate Slides In & Out
            setTimeout(function(){
                $('.direction').show('slide',{direction: 'right'},600);
            },50);

            setTimeout(function(){
                $('#Default').addClass('direction').removeClass('main').empty();
                $('#LoadAjax').addClass('main').removeClass('direction');   
            },650);
            return false;
        });
    };

    function LeftSlide(that) {
        var post_id = $(that).attr('href');
        $('.direction').load(post_id + ' #fullContent', function(){

            // Animate Slides In & Out
            setTimeout(function(){
                $('.direction').show('slide',{direction: 'left'},600);
            },50);

            setTimeout(function(){
                $('#Default').addClass('direction').removeClass('main').empty();
                $('#LoadAjax').addClass('main').removeClass('direction');   
            },650);
            return false;
        });
    };

As you can see on initial load it all works as expected, however if I then go to click right again nothing executes.

My question, is there a way to reset the function on the second click? And what is the reason that it doesn't run on the second click through?

Thanks for your help in advanced. Absolute amateur in this subject so any feedback will be appreciated to help me learn.

Cheers,

A

Edit: Added addition scripts

Solution:

$.ajaxSetup({cache:false});

    $('body').on('click', '.rightArrow a', function(e){
        e.preventDefault();
        history.pushState({ path: this.path }, '', this.href);
        $('.disableClicks').show();
        RightSlide(this);
        return false;
    });

    $('body').on('click', '.leftArrow a', function(e){
        e.preventDefault();
        $('.disableClicks').show();
        history.pushState({ path: this.path }, '', this.href);
        LeftSlide(this);
        return false;
    });

    function RightSlide(that) {

        var post_id = $(that).attr('href');

        $('.direction').load(post_id + ' #fullContent', function(){

            // Animate Slides In & Out
            setTimeout(function(){
                $('.direction').show('slide',{direction: 'right'},250);
            },50);

            setTimeout(function(){

                if($('#Default').hasClass('main')) {
                    $('#Default').addClass('direction').removeClass('main');
                } else {
                    $('#Default').addClass('main').removeClass('direction');
                }

                if($('#LoadAjax').hasClass('main')) {
                    $('#LoadAjax').addClass('direction').removeClass('main');   
                } else {
                    $('#LoadAjax').addClass('main').removeClass('direction');
                }
                $('.direction').empty().hide();
                $('.disableClicks').hide();

            },310);
            return false;
        });
    };

    function LeftSlide(that) {

        var post_id = $(that).attr('href');

        $('.direction').load(post_id + ' #fullContent', function(){

            // Animate Slides In & Out
            setTimeout(function(){
                $('.direction').show('slide',{direction: 'left'},250);
            },50);

            setTimeout(function(){

                if($('#Default').hasClass('main')) {
                    $('#Default').addClass('direction').removeClass('main');
                } else {
                    $('#Default').addClass('main').removeClass('direction');
                }

                if($('#LoadAjax').hasClass('main')) {
                    $('#LoadAjax').addClass('direction').removeClass('main');   
                } else {
                    $('#LoadAjax').addClass('main').removeClass('direction');
                }
                $('.direction').empty().hide();
                $('.disableClicks').hide();

            },310);
            return false;
        });
    };

Answer 1

I changed my jquery to this and it worked! hopefully this will help others out!

$.ajaxSetup({cache:false});

$('body').on('click', '.rightArrow a', function(e){
    e.preventDefault();
    history.pushState({ path: this.path }, '', this.href);
    $('.disableClicks').show();
    RightSlide(this);
    return false;
});

$('body').on('click', '.leftArrow a', function(e){
    e.preventDefault();
    $('.disableClicks').show();
    history.pushState({ path: this.path }, '', this.href);
    LeftSlide(this);
    return false;
});

function RightSlide(that) {

    var post_id = $(that).attr('href');

    $('.direction').load(post_id + ' #fullContent', function(){

        // Animate Slides In & Out
        setTimeout(function(){
            $('.direction').show('slide',{direction: 'right'},250);
        },50);

        setTimeout(function(){

            if($('#Default').hasClass('main')) {
                $('#Default').addClass('direction').removeClass('main');
            } else {
                $('#Default').addClass('main').removeClass('direction');
            }

            if($('#LoadAjax').hasClass('main')) {
                $('#LoadAjax').addClass('direction').removeClass('main');   
            } else {
                $('#LoadAjax').addClass('main').removeClass('direction');
            }
            $('.direction').empty().hide();
            $('.disableClicks').hide();

        },310);
        return false;
    });
};

function LeftSlide(that) {

    var post_id = $(that).attr('href');

    $('.direction').load(post_id + ' #fullContent', function(){

        // Animate Slides In & Out
        setTimeout(function(){
            $('.direction').show('slide',{direction: 'left'},250);
        },50);

        setTimeout(function(){

            if($('#Default').hasClass('main')) {
                $('#Default').addClass('direction').removeClass('main');
            } else {
                $('#Default').addClass('main').removeClass('direction');
            }

            if($('#LoadAjax').hasClass('main')) {
                $('#LoadAjax').addClass('direction').removeClass('main');   
            } else {
                $('#LoadAjax').addClass('main').removeClass('direction');
            }
            $('.direction').empty().hide();
            $('.disableClicks').hide();

        },310);
        return false;
    });
};