如何定位 Jquery Injected Nav答案

【问题标题】：How to target Jquery Injected Nav如何定位 Jquery Injected Nav
【发布时间】：2020-02-11 20:01:24
【问题描述】：

我正在使用 nav.html 文件中的 jquery 加载我的导航，因此我不必在每次更新时都在每个页面上更新它。

我正在尝试将加载的导航中的元素定位为在某些页面上处于活动状态，并且它仅在导航硬粘贴到页面的 html 时才有效，但当我从 nac-content.html 文件中加载它时它不起作用.

我确实注意到，当我在浏览器上查看源代码时，它实际上并没有粘贴到 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");
 });

【问题讨论】：

标签： javascript jquery html navigation

【解决方案1】：

你可以这样做

$(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.
    });
});

【讨论】：

【解决方案2】：

window.onLoad 在$(document).ready 之后被执行

你可以使用

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

【讨论】：