user2111911 user2111911 - 3 months ago 50
jQuery Question

Jquery load not working on loaded content

I am using this code to populate the html pages to a div.

$(document).ready(function(){
// Load Home Content
$('#content').load('pages/sample.html');

//Load Content Using Menu Links
$('.main-menu a').click(function(){
var page = $(this).attr('href');
$('.content').load('pages/' + page + '.html');
return false;
});
});


And i have anchors tags on loaded html. similar to my main page. a code example:

<div class="main">
<a href="sample">Go To Next Page</a>
</div>


Now i have multiple anchors on loaded div like above and i want to use same load procedure on it to change the code content div.

Any help would be appreciated.

Answer

You need to call the second load sequence after the first one has completed. You can do this by calling it in the callback function of the first load like so --

$('#content').load('pages/sample.html', function(){
    //load your second set of html here with another load.
    $('#previouslyloadeddiv').load('pages/anotherpage.html');
});

The reason it isn't working right now is because Jquery can't find the anchors in the loaded HTML as it hasn't finished loading yet.

Comments