Добавить / удалить классы из навигации, загруженной с Jquery

Question

Я загружаю содержимое своей боковой панели навигации с помощью jquery из файла nav-content. html, поэтому мне не нужно обновлять его на каждой странице при каждом обновлении.

То, что я пытаюсь сделать, это когда на указанной странице c навигация боковой панели с разворачиванием зависит от того, к какой категории относится эта страница.

Я пытаюсь настроить таргетинг на элементы в этой загруженной навигации, когда на некоторых страницах и работает только тогда, когда навигация жестко запрограммирована в html страницы, но не работает, когда я загружаю ее из файла nav-content. html файл с jquery.

Я заметил, что когда я просматриваю исходный код в браузере, он на самом деле не вставляется в html, но все равно отображает его, который я считаю отключением, но я не на 100%. Не уверен, стоит ли мне искать другой способ его загрузки или моя проблема в jquery.

Любое понимание будет с благодарностью.

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");
 });

Я спросил это несколько дней go, но это перефразировано / перефразировано объяснение удаленного поста.

Answer 1

Две вещи, которые помогут вам выбрать правильный путь.

1) jQuery get() не загружает файл HTML. Возможно, вы захотите использовать load() для получения содержимого боковой панели: https://api.jquery.com/load/

2) $(document).ready срабатывает до window.onload. См .: window.onload vs $ (document) .ready ()

Чтобы убедиться, что ваш контент загружен до изменения классов, вы можете внести свои изменения в обратный вызов из load() (функция, переданная в качестве второго параметра для загрузки ()).

Что-то вроде [не проверено]:

$(function() {
  $( "#sidebar-content" ).load( "nav-content.html", function() {
    $('ul#devSubmenu').removeClass('collapse'),
    $('ul#appStackSubmenu').removeClass('collapse'),
    $('a[href^="#devSubmenu"]').attr("aria-expanded","true"),
    $('a[href^="#appStackSubmenu"]').attr("aria-expanded","true");
  });
});

Обтекание $(function() { ... }) - это просто jQuery сокращение для $(document).ready();