jquery ajax change div content -

i have page div in an id centeredmenu. when page first loads has menu inside div 10 options. each 1 of these options has different named id such menu2, menu3 , on blank href link. on inital load can change menu, once has completed cannot select other menu , change content of div again new menu

my script is

<script type="text/javascript">     $(document).ready(function(){        $("#menu2").click(function(){         $('#centeredmenu').load('menu2.php');        });         $("#menu3").click(function(){         $('#centeredmenu').load('menu3.php');        });        $("#menu4").click(function(){         $('#centeredmenu').load('menu4.php');        });        $("#menu5").click(function(){         $('#centeredmenu').load('menu5.php');        });        $("#menu6").click(function(){         $('#centeredmenu').load('menu6.php');        });        $("#menu7").click(function(){         $('#centeredmenu').load('menu7.php');        });        $("#menu8").click(function(){         $('#centeredmenu').load('menu8.php');        });        $("#menu9").click(function(){         $('#centeredmenu').load('menu9.php');        });        $("#menu10").click(function(){         $('#centeredmenu').load('menu10.php');        });        $("#menu11").click(function(){         $('#centeredmenu').load('menu11.php');        });      }); </script> 

so first load page , select menu3 loads menu3 fine, sunsequent menus not load unless refresh page , go start again , select other menu want. appreciated p

you're overwriting menu when load new content, you'll need delegated event handler:

$('#centeredmenu').on('click', '[id^="menu"]', function(e) {     e.preventdefault();     $('#centeredmenu').load(this.id + '.php'); }); 

also, elements empty href's reload page, should using # sign in href's , prevent default action in event handler.