编辑用 JQuery 加载的 HTML答案

【问题标题】：Editing HTML loaded with JQuery编辑用 JQuery 加载的 HTML
【发布时间】：2020-06-06 20:20:31
【问题描述】：

我正在尝试为我的网站制作一个加载了 JQuery 的导航栏，这样我就不必在每个网页中都对其进行编辑，但有些页面需要按钮颜色不同。

我使用找到的答案here 来加载我的导航栏。我尝试做类似$(document).ready() 的事情，但发现它在导航栏实际加载之前运行。如果我添加定时延迟，它确实有效，但我觉得这不是很好的做法，因为每个连接都是不同的。

有什么方法可以让我在导航栏的 html 中设置一些东西，以便在加载时调用某些东西，或者在导航栏完全加载时，我可以在每个页面中添加一些观察者？

抱歉没有添加和编码，我想这会有所帮助，只是有点尴尬

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Placeholder</title>
        <link rel="stylesheet" href="index.css">
        <script src="jquery-1.10.2.js"></script>
    </head>
    <body>
        <div id="nav">

        </div>
        <script>
            $(function(){
              $("#nav").load("navbar.html");
            });
        </script>

        <div class="index-header">
            <h1>Welcome to PLACEHOLDER</h1>
            <p class="desc">A personal portfolio</p>
        </div>
        <script>
            $(document).ready(function(){
                window.setTimeout(function(){
                    bar = document.getElementsByClassName("bar").item(0);
                    buttons = bar.children[0];
                    var buttonArray = Array.from(buttons.children);
                    buttonArray.forEach(function(item){
                        item.style.color="blue";
                    })
                }, 50);
            });
        </script>
    </body>
</html>

现在，我让它加载栏，然后在文档中稍后我让它在文档加载时执行一些操作并等待 50 毫秒。请原谅我对 JS 的任何不良做法，因为我是这方面的新手。

【问题讨论】：

您完全忘记发布您的代码 :) 请edit 创建一个minimal reproducible example。热烈欢迎使用 Stack Overflow。
请把你的代码放在这里解释一下。
以评论为答案，JS总是迟到。首先浏览器需要理解你的 HTML 标记（通过创建一个 DOM 树）而不是它（希望不是）暂停 JS 解释器来启动......而不是最终到达 JS 应该存在的文档的末尾...... . 而且，等等，你的意思是什么“因为每个连接都是不同的” - 你的意思是速度？
是的，我的意思是速度。延迟在测试中可以正常工作，但在生产中不行。对于我的（慢速）连接来说，它要么太快，要么对于另一个（快速）连接来说太慢。另外，JS 是否应该位于文档的绝对底部？有一个原因，在测试期间，我有它，但现在我不记得了。也许我需要从头开始重新学习它......
正如我所料，您在文档中传播<script> 标签。尽量不要那样做。将所有脚本保留在结束 </body> 标记之前。不是问题，而是一个好的开始。还要学习模板。它通常在服务器端完成。此外，请使用有关渐进增强和 SPA（单页应用程序）的谷歌 - 这意味着您的网站应该在禁用 JS 的情况下完美运行并请求所需的页面（不是必须） - 而不是逐渐增加您将其增强为“SPA”。

标签： javascript html jquery

【解决方案1】：

使用jQueryload()方法完成回调：

$("#navigation").load("navigation.html", function(){
    // the new html now exists, do what you want to it here

});

【讨论】：