So, I have a function that at first was supposed to work with my navbar. I click in some link and it load a page trough AJAX inside a #content
div. But what if I have a link inside that div?
I mean, AJAX call a page that contains a link that is supposed to word with AJAX too, but that works only when I access page directly (if the content inside the #content
div wasn't called by AJAX), otherwise it runs like a normal href
link.
My AJAX function:
$(function() {
$('a').click(function(e) {
$("#loading").show();
$("#content").animate({ opacity: 0 });
var href = $(this).attr("href");
ajaxtitle = $(this).attr("ajaxtitle");
//this.a = ajaxtitle;
loadContent(href);
// HISTORY.PUSHSTATE
window.history.pushState('', ajaxtitle, href);
document.title = ajaxtitle;
e.preventDefault();
});
//MAKE BACK/FORWARD WORKS
window.onpopstate = function(event) {
$("#loading").show();
//console.log("pathname: "+location.pathname);
loadContent(location.pathname);
};
})
//AJAX ITSELF
function loadContent(url){
$.ajax({
url: url,
type: 'GET',
error: function(){
alert("O");
},
success:
function(data){
$('#content').html(data);
$("#loading").hide();
$("#content").animate({ opacity: 1 })
}
});
// MAKE NAVBAR ACTIVE
$('li').removeClass('active');
$('a[href="'+url+'"]').parent().addClass('active');
//window.history.pushState('', ajaxtitle, href);
};
And an example of my links, just to complement:
<a href="projects" ajaxtitle="Projects">PROJECTS</a>
What I have to do to have my AJAX-called links working?