CODEWITHSUNDEEP
jqueryloadblogs
Adam Norris
Adam Norris

Reputation: 195

Use JQuery to load and reload elements into a div

I'm currently updating my website into a single-page design and I have the blog imported into a div using the .load() function but when I click on the blog links such as 'Categories' and 'Latest Posts' it opens a new page, I need it to stop the link firing and replace the current div contents with where the links are pointing instead. This is what I have so far but it doesn't seem to work.

<script>
    $(document).ready(function(){

    $( "#blog-content" ).load( "/blog/index" );

    $( "#sidebar a" ).click(function(e){
        e.preventDefault();
        var a_href = $(this).attr('href');
        $( "#blog-content" ).load(a_href);

    }); // end click

    }); // end document ready
</script>

'#blog-content' is an empty div for the blog page to go '#sidebar a' are the links on the right hand sidebar

The website is www.acnorris.uk (then click on blog link) I am currently using Nibbleblog to generate the blog posts / categories which is located in a /blog subfolder.

Thanks for any ideas you can come up with!

Adam

Upvotes: 0

Views: 133

Answers (1)

ptd
ptd

Reputation: 3053

I would guess that the sidebar links are loaded after the javascript, so jquery isn't listening for events on the sidebar links. Try:

$(document).on('click', '#sidebar a', function(e) {
...what you already have
}

This will properly look for clicks on the sidebar links.

Upvotes: 1

Related Questions