Jquery 2.0 - Reanimate animation on click

Question

I have bit of a problem. Animation is working just first time is clicked, second time when it is clicked, it is refusing to work - when I click right and back it is working, but when I want to go right again it is not working. Code:

var main_container = $('.main_container'),
menu = $('.home_navigation_text'),
second_page = main_container.find('.second_page'),
body_width = $(window).width();

menu.hover(
        function(){
            var $this = $(this),
            page = $this.find('a').attr('href');
            second_page.empty().load(page);
            },
        function(){

        }
    );

menu.on('click', function(e){
    main_container.animate({
    right: '+=' + body_width
  }, 600, 'linear',  function() {
    go_back();
  });
    return false;
});

function go_back()
{
    var back =  second_page.find('.back');
    back.on('click', function(e){
        main_container.animate({
        left: '+=' + body_width
      }, 600, 'linear',  function() {
     });
        return false;
    });
}

HTML Code:

<div class="main_container clearfix">
    <section class="home_page clearfix">
        <header class="home_header container">

            <div class="grid_3 alpha omega" id="home_logo">
                <img class=""  src="<?php echo IMG ?>resources/jbs_cc_logo.png" alt="JBS Logo">
            </div>
            <div class="grid_9 alpha omega">

            </div>

        </header>
        <!-- END OF HEADER -->

        <div class="home_main container">
            <nav class="home_navigation clearfix">
                <ul class="clearfix">
                    <?php foreach ($menu as $mn): ?>
                        <li class="home_navigation_text">
                            <a class=home_navigation_link  href="<?php echo base_url($mn['slug']) ?>"><?php echo $mn['title'] ?></a>
                        </li>
                    <?php endforeach ?>
                </ul>
            </nav>
        </div>

    </section>
    <section class="second_page">

    </section>
</div>

Answer 1

As you're loading content, I'm guessing the menu is somehow replaced, and is as such dynamic. Delegating to the main_container would probably work, but it's hard to say as there is no markup posted and I have no idea how it looks ?

var main_container = $('.main_container'),
    second_page    = main_container.find('.second_page'),
    body_width     = $(window).width();

main_container.on({
    mouseenter: function() {
        second_page.empty().load( $(this).find('a').attr('href') );
    },
    click: function(e) {
        e.preventDefault();
        main_container.animate({
            right: '+=' + body_width
        }, 600, 'linear');
    }
}, '.home_navigation_text');


main_container.on('click', '.back', function(e){
    e.preventDefault();
    main_container.animate({
        right: '-=' + body_width
    }, 600, 'linear');
});