Solution 1 :

You could do something like this

$(document).ready(function () {
    // DOM has been parsed

    $.get("your/url", function (data) {
        var $navContainer = $("#sidebar-content");
        $navContent = $(data); // build a jQuery object from your html markup
        // do your updates using the find method of jQuery objects
        $navContent.find("ul#devSubmenu").removeClass("collapse");
        // ...

        $navContainer.append($navContent); // assuming the container is empty.
    });
});

Solution 2 :

window.onLoad gets executed after $(document).ready

You could use

document.addEventListener("DOMContentLoaded", function(event) {
  $.get("nav-content.html", function(data){
        $("#sidebar-content").html(data);
    })
});

Problem :

I am loading in my navigation with jquery from a nav.html file so I don’t have to update it on every page each time it updates.

I am trying to target elements in that loaded nav to be active when on certain pages and it only works when the nav is hard pasted into the page’s html but it doesnt when I load it in from the nac-content.html file.

I did noticed when i view the source code on browser it doesnt actually paste in the html but still displays it which I think is the disconnect but I am not 100%. Not sure if I should look into different way to load it in or if my jquery is the issue.

Any insight would be greatly appreciated.

HTML:

<nav>
 <div id="sidebar">
  <div id="sidebar-content">
      <!-- nav loads here from nav-content.html -->
  </div>
 </div>
</nav>

Jquery:

/*Loads the Nav */`
window.onload = function(){
    $.get("nav-content.html", function(data){
        $("#sidebar-content").html(data);
    })
  }
/* changes classes within the loaded nav based on what page it's on */
$(document).ready(function() {
  $('ul#devSubmenu').removeClass('collapse'),
  $('ul#appStackSubmenu').removeClass('collapse'),
  $('a[href^="#devSubmenu"]').attr("aria-expanded","true"),
  $('a[href^="#appStackSubmenu"]').attr("aria-expanded","true");
 });

By