CODEWITHSUNDEEP
jqueryhtmlcssajax
James Lawson
James Lawson

Reputation: 419

Ajax/jQuery links not loading properly

I'm currently using the jQuery/Ajax page load script, to fire my web pages into a div tag (rather than refreshing the page each time).

I've just started to notice though that any links inside the pages that are being loaded in, will not display their destination in the same div?

Idea:

Link 1 on the home page > loads into main content div tag > click another link on the content that has just loaded from link 1 > loads into main div tag.. however right now, it just opens it as a new page.

The way the links are taught/called is via <ul id="style"><li>link</li></ul> tags.

The coding from the non-link working page is the following:

<ul id="t-endnav">

            <li><a href="lukeberry.php">Luke Berry</a></li><br />
            <li><a href="click.php">Click Radio</a></li>

</ul>

You can find the website at: http://colourednoise.co.uk/site/22/chrome.php - the page is under "Portfolio" and both "Click Radio" & "Luke Berry" should be loading their pages in-place of the current content displayed from "Portfolio".

Any idea where I'm going wrong? It's turn my head to pieces today..

Upvotes: 0

Views: 180

Answers (1)

PlantTheIdea
PlantTheIdea

Reputation: 16359

All content loaded in through AJAX needs to have methods applied to that new content done in the callback function. Example:

$('#SomeDivWithLinks').load('whatever.php #DivToLoad',function(){
    $('a').on('click',function(e){
        e.preventDefault():
        alert('this totally superworks');
    });
});

If not performed in the callback function, your jQuery code will never see the new content as able to be manipulated.

Edit: as long as your callback function does not require parameters, you can just have it like this:

function doSomething() {
    alert('happy times!');
}

$('#SomeDivWithLinks').load('whatever.php #DivToLoad',doSomething);

Upvotes: 2

Related Questions