Using javascript on loaded html

Question

I've briefly looked to find any similar questions and found non that are alike or that I understand, so first I apologise if this is a duplicate.

My problem is that I cannot use javascript on loaded (.load) html.

I call a navbar into a div by use of:

$(document).ready(function() {
  $('.nav').load("navbar.html");
});

This works perfectly and I have no problems with this. Problems arise when I want to, for example, add a class to my loaded html code.

The script I currently use (saved in a separate .js file and called at the end of my html code):

$(document).ready(function() {
  $('#home').removeClass('active');
  $('#profile').addClass("active");
});

Here is what I intended to happen to the loaded html code:
This is part of the navbar and is loaded through the first code snippet ^.

<li id="profile"><a href="Profile.html">Profile</a></li>

After page is loaded: (Added: 'class="active")

<li class="active" id="profile"><a href="Profile.html">Profile</a></li>

(This is part of an unordered list using bootstrap nav-tabs.)

Anyway, when I directly put this code into my html page and remove the import through javascript, I can add class's such as the 'active' class. Additionally, I have a slider on my page which uses arrows through the use of javascript to 'slide' through the pictures and I experience exactly the same problem:

When the code is imported I cannot edit through use of javascript, but when the code is present in the actual raw html code, I can. I don't understand why this is as I am fairly new to javascript and its syntax.

Thanks in advance, I'd be happy to answer any questions as I'm sure this isn't exactly clear because I am not entirely sure where the problem lies.

Answer 1

What's likely happening is that your code is trying to operate on the loaded html before it has actually loaded. Try putting it in the complete callback:

$('.nav').load("navbar.html", function() {
  $('#home').removeClass('active');
  $('#profile').addClass("active");
});

This will make sure that the code runs after the load has completed.