Mobile Site Navigation Menu Toggle Button Not Working After AJAX

Hi!

I am making a child theme for Storefront, and I reload some pages with my own AJAX. After then AJAX, the mobile main menu toggle button stops working. So I have called the following script that I got from the Storefront theme, after my AJAX:

// eslint-disable-next-line @wordpress/no-global-event-listener
            const container = document.getElementById( 'site-navigation' );
            if ( ! container ) {
                return;
            }

            const button = container.querySelector( 'button' );

            if ( ! button ) {
                return;
            }

            const menu = container.querySelector( 'ul' );

            // Hide menu toggle button if menu is empty and return early.
            if ( ! menu ) {
                button.style.display = 'none';
                return;
            }

            button.setAttribute( 'aria-expanded', 'false' );
            menu.setAttribute( 'aria-expanded', 'false' );
            menu.classList.add( 'nav-menu' );

            button.addEventListener( 'click', function () {
                container.classList.toggle( 'toggled' );
                const expanded = container.classList.contains( 'toggled' )
                    ? 'true'
                    : 'false';
                button.setAttribute( 'aria-expanded', expanded );
                menu.setAttribute( 'aria-expanded', expanded );
            } );

...

However, it works only after odd numbers of AJAX reloads; 1, 3, 5 etc. Maybe I need to unbind it before I bind it anew? How do I do that, since the function bound to the event is an anonymous function? I have tried to do it with jQuery, but the problem remains.

Does anyone know how I can get the toggle to work after all my AJAX reloads?

Regards,
Almir

• This topic was modified 2 years, 8 months ago by almirdzankovic.