javascript - 将导航 html 代码移动到单独的文件，javascript 现在不起作用

Question

我的导航栏完全使用汉堡图标来使用 javascript 文件进行动画处理，直到我决定将导航代码移动到单独的文件中，以便可以将其加载到所有不同的 html 文档中。现在，当我尝试单击汉堡图标时，我收到以下错误。代码仍然加载导航栏（徽标、图标、格式），但 javascript 不起作用，因为它说 getElementById 的值为 null。不知道如何解决。

当前错误 文件夹的图像与所有代码的文本文件

标签： javascripthtmljquerynullnav

Answer 1

您的代码在.load()函数可以返回任何内容之前运行。它异步运行以停止阻止其他代码运行。您可以将回调函数提供给加载函数，加载函数返回时将调用该回调函数。然后将更新 DOM 以了解您的导航元素。您可以将其他代码封装在一个函数中，然后将该函数名称作为参数，或者您可以传递一个匿名函数，然后将所有内容都放在其中。

例子：

$('#nav-placeholder').load('assets/nav.html', function() {
    const ham = document.getElementById('ham');
    ham.addEventListener...
    ...
    ..
    .
 });