jquery 事件处理程序仅运行一次

Question

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 1

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>