jquery event handler only running once

I am having problems with jqueries “click” event handler, its working only once, and then it stops, please I need help fixing it.

What I did is, I use an image as a button, for my Web app but, through jquery, but it only runs once.

Here is the code:

$( document ).ready(function refresh() {
    $(".menu_button").click(() => {
        $("nav").addClass("open-menu");
    });
});

$( document ).ready(function() {
    $(".cancel_menu").click(() => {
        $("nav").removeClass("open-menu").css("transform", "translatex(100%)").css("transition-duration", "2s")
    });
});

Please tell me if you need more info, Thanks.

Answer

The problem I don’t think is with the jquery. Your cancel menu moves the menu all the way to the right, but you never bring it back.

I reset the transform to none on the click of the menu button and it works.

Below is the relevant line in the menu_button click event handler

$("nav").addClass("open-menu").css("transform", "none");

$( document ).ready(function refresh() {
    $(".menu_button").click(() => {
        $("nav").addClass("open-menu").css("transform", "none");
    });
});

$( document ).ready(function() {
    $(".cancel_menu").click(() => {
        $("nav").removeClass("open-menu").css("transform", "translatex(100%)").css("transition-duration", "2s")
    });
});

.open-menu{
  background:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="menu_button">OPEN</button>
<button class="cancel_menu">CANCEL</button>
<nav>NAV</nav>