JavaScript Burger Button not working

Question

On click of a burger button I want "site-navigation-menu" to appear and take up the whole screen. At the moment nothing happens when I click on my burger button, not even a console log. However, if I change my JS to say on click of "body", my "site-navigation-menu" does appear.

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

When i change ".burger" to "body" the js works.

$(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");
});
});

My burger is inside header.html which I reference from index.html like this:

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

Could this be causing any problems?

Answer 1

With regards to your edit, yes that definitely is the problem. The content is being added dynamically, so you should call the click function in the following way -

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

This will directly reference the body and then check for the dynamically added class.