jQuery load执行正常但回调函数未触发问题求助

我是网站开发领域的新手，现遇到一个技术问题：导航栏已通过$("#nav-placeholder").load("/assets/html/nav.html")成功加载，但回调函数中的changeActiveElement始终未执行，想请教原因及解决办法。

相关代码 #

页面HTML代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!--CSS Styles -->
        <link rel="stylesheet" href="../assets/css/styles.css"/>

    </head>
    <body>
        <!--Navigation bar-->
        <div id="nav-placeholder"></div>
        <!--end of Navigation bar-->
    </body>

    <script src="../assets/js/navigation_bar.js" type="text/javascript", locator="about"></script>
</html>

navigation_bar.js脚本代码 #

locator = document.currentScript.getAttribute('locator');

function changeActiveElement(element_id){
    console.log("Called");
    nav_element = document.getElementById("navigation");
    for (i = 0; i < nav_element.length; i++) {
        console.log(nav_element[i].id)
        if(nav_element[i].id == element_id) document.getElementById(element_id).className = "active-nav-link";
        else document.getElementById(element_id).className = "nav-link";
    }
}

$(function()
    {$("#nav-placeholder").load("/assets/html/nav.html", function(){
        changeActiveElement(locator);
    });}
);

nav.html导航栏代码 #

<nav>
    <h1><a href="index.html" class="nav-link-home">Some name</a></h1>
    <ul id="navigation" class="navigation">
      <li><a id="about" href="/pages/about.html" class="nav-link">About</a></li>
      <li><a id="compt" href="#compt" class="nav-link">Competences</a></li>
      <li><a id="projects" href="#projects" class="nav-link">Projects</a></li>
      <li><a id="contact" href="#contact" class="nav-link">Contact</a></li>
    </ul>
    <button class="burger-menu" id="burger-menu">
      <ion-icon class="bars" name="menu-outline"></ion-icon>
    </button>
</nav>

问题原因分析 #

1. 脚本标签语法错误：HTML中的script标签使用了非法的自定义属性写法, locator="about"，标准自定义属性需以data-前缀开头，否则浏览器无法识别，导致getAttribute('locator')获取不到有效值，后续函数执行逻辑异常。
2. 函数内部逻辑错误：
   • nav_element = document.getElementById("navigation")获取的是ul元素，该元素没有length属性，因此for (i = 0; i < nav_element.length; i++)循环直接跳过，函数执行中断。
   • 循环内错误地始终用element_id获取元素，而非当前遍历到的元素，逻辑完全错误。
3. jQuery版本兼容问题：使用的jQuery 1.10.2版本较旧，document.currentScript作为HTML5新增API，在旧版jQuery环境下可能存在获取失败的情况，导致locator变量无值。

修复方案 #

1. 修正脚本标签属性：
   将script标签改为：

   <script src="../assets/js/navigation_bar.js" type="text/javascript" data-locator="about"></script>
   

   同时在JS中修改获取属性的代码：

   locator = document.currentScript.getAttribute('data-locator');
   

2. 修复changeActiveElement函数逻辑：

   function changeActiveElement(element_id){
       console.log("Called");
       // 获取导航栏下所有的a标签
       const navLinks = document.querySelectorAll("#navigation a");
       navLinks.forEach(link => {
           link.className = link.id === element_id ? "active-nav-link" : "nav-link";
       });
   }
   

3. 可选优化：若条件允许，将jQuery升级至3.x版本，提升API兼容性和稳定性。

内容的提问来源于stack exchange，提问作者King Powa