jQuery 加载执行但回调未执行答案

【问题标题】：jQuery load executes but callback is not executedjQuery 加载执行但回调未执行
【发布时间】：2022-12-08 08:27:06
【问题描述】：

我对网站开发有点陌生，所以我在这件事上寻求一些帮助。我有以下 SN-P 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>

sn-p 的范围是更改 navigation 元素中列出的 a 标签的类。导航栏通过$("#nav-placeholder").load("/assets/html/nav.html") 正确加载，但changeActiveElement 函数从未通过回调执行。

有人可以向我解释这种行为吗？

【问题讨论】：

在我看来，你应该使用 $( document ).ready(function() { 而不是 $(function(){
@Zak 不正确。请阅读learn.jquery.com/using-jquery-core/document-ready
@扎克The former is shorthand for the latter。

标签： javascript html jquery

【解决方案1】：

我测试了你的代码，一切正常，除了 nav_element 不是列表，因此 nav_element.length 抛出错误。您可以改用 document.querySelectorAll("#navigation");，它返回所有选定元素的节点列表。虽然，我不建议通过 id 对元素进行 for 循环。使用类来选择元素。 Id 仅适用于一个元素。

【讨论】：