jquery ajax change div content

Question

I have a page with a div in it with an an id centeredmenu. When the page first loads it has a menu inside the div with 10 options. each one of these options has a different named id such as menu2, menu3 and so on with a blank href link. On inital load i can change to any menu, once this has completed i cannot select any other menu and change the content of the div again with the new menu

my script for this 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 i first load the page and select say menu3 which then loads menu3 fine, all sunsequent menus will then not load unless i refresh the page and go back to the start again and select the other menu i want. Your help is greatly appreciated P

can you set up a fiddle with this? are you getting any errors in the console? — haz0rd
– haz0rd, Commented Aug 28, 2013 at 21:08
@haz0rd it is almost as if the jquery is not working. Normally you would not see a pge refresh which i do not get on initial change of menu. when i select subsequent menus you do see the page trying to reload which should not happen — Palm Int Srv
– Palm Int Srv, Commented Aug 28, 2013 at 21:12
jfiddle is a way for us to see exactly what you're working with and be able to reproduce your problem. if the page is loading sounds like you might have some <a> tags you are setting this too? you should make sure to nullify their hrefs with # like adeneo mentioned — haz0rd
– haz0rd, Commented Aug 28, 2013 at 21:20

adeneo · Accepted Answer · 2013-08-28 21:12:39Z

3

You're probably overwriting the menu when you load the new content, so you'll need a delegated event handler:

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

also, elements with empty href's does reload the page, you should be using the # sign in your href's and prevent the default action in the event handler.

answered Aug 28, 2013 at 21:12

adeneo

319k29 gold badges409 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Palm Int Srv Over a year ago

Many thanks guys, I was using # on the hrefs, the event handler solved the issue using the above snippet :)

Collectives™ on Stack Overflow

jquery ajax change div content

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related