Load page via load()

Question

I’m looking to get my pages loaded via jquery load(), only I’m facing a problem.

I have a menu with links on a page called menu.php I’m hoping that when I click on the links in the menu.php it opens on the same page (index.php) where I have a load(). The problem is that it updates and redirects to the page when opening it. Follow my code

php menu.

Menu

  <ul class="menu">

      <li><a href="categoria/salada" class="linkmenu">SALADA</a></li>
        <li><a href="categoria/arroz" class="linkmenu">ARROZ</a></li>
        <li><a href="categoria/feijao" class="linkmenu">FEIJÃO</a></li>

  </ul>

index php.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type="text/javascript">
  $(document).ready(function(){
    $(".menu a").click(function( e ){
      e.preventDefault();
      var href = $( this ).attr('href');
      $("#content").load(href);
    });
  });
  </script>

<div id="content"></div>


<?php require("menu.php"); ?>

Answer 1

Try to do so:

jQuery(function(){

    jQuery("body").on("click", "ul.menu a", function(){

        jQuery("#content").load( jQuery(this).attr('href') );

        return false;

    });

});