title: Ajax load click function only works once
body: <p>I've been fiddling for a couple hours now and I can't figure out why this is happening.</p>
  
  <p>I've written a jquery navigation script that replaces content in a div called "contentwrapper". The content is supposed to hide, a loading animation is displayed then disappears, and the new content fades in. The problem is that the animation does not happen every other time. On first click, it works, but the page refreshes on the second click. The cycle continues. It's as if the click function is not active despite the use of <code>.on()</code>. Here is my code:</p>
  
  <pre><code>$(window).ready(function(){
  
      $('.menu_top').on('click', function(e) {
      $("#loading").show();
      var href = $(this).attr('href');
      history.pushState({}, '', href);
      $('#contentwrapper').fadeOut('normal').hide().load(href + "#contentwrapper &gt;  *").fadeIn('slow');
  
  return false
  });
      $(document).ajaxSuccess(function() {
      $("#loading").fadeOut();
  });
  });
  </code></pre>
  
  <p>Here it is <a href="http://www.fueledbykyle.com/sites/mwood/index.html" rel="nofollow">in action</a></p>
  
  <p>I tried applying everything I could find on the interwebs, to no avail.</p>