Question

So I have a menu that gets added using this function:

function loadContent() { 
    $(".navbar").load("navigation.html"); 
} 

navigation.html looks like this:

<ul>
    <li><a href="home.html" class="first">Home</a></li>
    <li><a href="calendar.html">Calendar</a></li>
    <li><a href="profile.html">Profile</a></li>
    <li><a href="charts.html" class="last">Energy Charts</a></li>
</ul>

but when I try to select something in that menu and add a class, let’s say:

$('.navbar a').addClass('activeState');

it doesn’t work in Chrome, I think because the DOM needs to be refreshed or something, I really don’t know…

Answer 1

You have to wait for the content to actually load. Put your code in the load callback function:

function loadContent() { 
    $(".navbar").load("navigation.html", function () {
        $('.navbar a').addClass('activeState');
    }); 
}

---

As pointed out by @LifeInTheGrey, you should use a separate function for better performance:

function loadContent() { 
    $(".navbar").load("navigation.html", actOnContent); 
}

function actOnContent () {
    $('.navbar a').addClass('activeState');
}

---

You should also look into selector caching…