title: ajax load posts as full page slides
body: <p>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.</p>
  
  <p>HTML/PHP:</p>
  
  <pre><code>// First Div that hold all loaded data
  &lt;div id="Default" class="main"&gt;
      &lt;div id="fullContent"&gt;
          &lt;?php while ( have_posts() ) : the_post(); ?&gt;
              &lt;?php the_title(); ?&gt;
              &lt;?php the_content(); ?&gt;
          &lt;?php endwhile; ?&gt;
  
          &lt;div class="leftArrow"&gt;
              &lt;?php previous_post_link_plus( array('format' =&gt; '%link', 'order_by' =&gt; 'menu_order', 'loop' =&gt; true) ); ?&gt;
          &lt;/div&gt;
          &lt;div class="rightArrow"&gt;
              &lt;?php next_post_link_plus( array('format' =&gt; '%link', 'order_by' =&gt; 'menu_order', 'loop' =&gt; true) ); ?&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  // Second div where new content will be loaded
  &lt;div id="LoadAjax" class="direction"&gt;&lt;/div&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>JQUERY</p>
  
  <pre><code>$.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 &amp; 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 &amp; 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;
          });
      };
  </code></pre>
  
  <p>As you can see on initial load it all works as expected, however if I then go to click right again nothing executes.</p>
  
  <p>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?</p>
  
  <p>Thanks for your help in advanced. Absolute amateur in this subject so any feedback will be appreciated to help me learn.</p>
  
  <p>Cheers,</p>
  
  <p>A</p>
  
  <p>Edit: Added addition scripts</p>
  
  <p>Solution:</p>
  
  <pre><code>$.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 &amp; 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 &amp; 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;
          });
      };
  </code></pre>