JavaScript 汉堡按钮不起作用

Question

点击汉堡按钮时，我希望出现"站点导航菜单"并占据整个屏幕。目前，当我点击汉堡按钮时，没有任何反应，甚至没有控制台日志。但是，如果我将我的 JS 更改为在单击"正文"时说，我的"站点导航菜单">确实会出现。

<div class="burger" id="burger-6">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>

当我将".burger"更改为"body"时，js 可以工作。

$(document).ready(function () {
$(".burger").click(function() { 
console.log("work plz");
$(".burger").toggleClass("is-active");
$(".site-navigation-menu").toggleClass("show");
$(".line").toggleClass("burgerColor");
$(".burger").toggleClass("burgerFixed");
});
});

我的汉堡在标题内.html我从索引中引用.html如下所示：

$(function() {
$("#header").load("header.html");
$("#footer").load("footer.html");
});

这会导致任何问题吗？

Answer 1

关于您的编辑，是的，这绝对是问题所在。内容是动态添加的，因此应按以下方式调用 click 函数 -

$("body").on('click', '.burger',function() { 
console.log("work plz");
$(".burger").toggleClass("is-active");
$(".site-navigation-menu").toggleClass("show");
$(".line").toggleClass("burgerColor");
$(".burger").toggleClass("burgerFixed");
});

这将直接引用正文，然后检查动态添加的类。