javascript-使用jquery加载html内容时变量为null

我在几个页面中使用了一个标题，因此我想使用jquery将其导入到每个页面中，这样我就不必使用以下代码多次进行任何更改：

$(document).ready(function() {
    $('#header').load("header.html");
});

标题加载良好，但问题是标题中有一个按钮，我已将其分配给变量：

var headerButton = document.querySelector('.header__header-button')

我在这个按钮上添加了一个事件监听器，以便在按下按钮时执行一些代码：

headerButton.addEventListener('click', function () {

问题是我在javascript控制台中遇到了一个错误：

TypeError: headerButton is null page.js:17:1

问题似乎是变量在加载Html之前就被赋值了，尽管我不确定。 变量或EventListener没有问题，当头文件在主文件中时，它们都可以工作。那么，我能做些什么来解决这个问题呢？

---

.. 或者，也许有一种更好的方法可以导入我不知道的Html

您可以尝试使用回调函数

$(document).ready(function() {
    $('#header').load("header.html", () => {
        var headerButton = document.querySelector('.header__header-button');
        headerButton.addEventListener('click', function () {});
    });

});

您应该在

header.html

的内部使用

$（document.ready（）

，以确保DOM可用，然后再尝试使用

JavaScript

操作元素

下面是您试图加载

header.html

到的页面示例：

$（文档）.ready（函数（）{
$（“#header”）.load（“header.html”）；
});

然后，在

header.html

中执行以下操作：

这是一个标题

标题按钮-点击我！
$（文档）.ready（函数（）{
var btn=document.getElementById（“按钮”）；
btn.addEventListener（“单击”，函数（）{
警报（“按钮被点击”）；
});
});

下面是一个工作示例，如果您想查看演示：

---

您是否尝试了

load（）

提供的回调函数？加载完成时调用此回调done@HussamAlhassan如果你觉得答案有用，请投票表决。谢谢。@goto1我确实试过了，但它不让我这么做，因为我还没有15个名声。“对不起！”胡萨马哈桑明白了，别担心。谢谢