jQuery toggle（）并不总是触发

Question

I've been making some basic mobile navigation and am using a click event to show/hide the menu.

A reduced code sample:

        jQuery('.menu-button').click(function(){
            jQuery('.header-nav').toggle();
            console.log('clicked');
        });

I've been remotely debugging on mobile and the console.log always works, but the .header-nav toggle() seems to randomly not trigger - I can't spot a pattern to it, but it always remains in the DOM (which it should), so it being somehow removed is not the reason why it is not firing.

Any ideas?

Answer 1

Thanks to Kevin B's comment it seems that the click event is firing multiple times. To fix this, the following was used:

$(element).off().on('click', function() {
    // function body
});

Reference: jQuery click events firing multiple times