jquery on click function not working with list-items

Question

I have a sub menu with a few items. When I click on a list item it is supposed to add a class closed-menu.

I used the click function but when I inspect, I can't really see the class.

$(document).ready(function() {
   $('li.current-menu-item').click(function() { 
       $(this).addClass('closed-menu-item');
   });
 });

For testing purposes I used this code to automatically just add the same class and it worked:

$("li.current-menu-item").addClass("closed-menu");

So, how can I add the class only when I click on the list item?

Note: I am developing the site using WordPress undersocres starter theme so here is the entire js:

( function( $ ) {
var container, button, menu, links, subMenus, i, len;

container = document.getElementById( 'site-navigation' );
if ( ! container ) {
    return;
}

button = container.getElementsByTagName( 'button' )[0];
if ( 'undefined' === typeof button ) {
    return;
}

menu = container.getElementsByTagName( 'ul' )[0];

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

menu.setAttribute( 'aria-expanded', 'false' );
if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
    menu.className += ' nav-menu';
}

button.onclick = function() {
    if ( -1 !== container.className.indexOf( 'toggled' ) ) {
        container.className = container.className.replace( ' toggled', '' );
        button.setAttribute( 'aria-expanded', 'false' );
        menu.setAttribute( 'aria-expanded', 'false' );
    } else {
        container.className += ' toggled';
        button.setAttribute( 'aria-expanded', 'true' );
        menu.setAttribute( 'aria-expanded', 'true' );
    }
};

// Get all the link elements within the menu.
links    = menu.getElementsByTagName( 'a' );
subMenus = menu.getElementsByTagName( 'ul' );

// Set menu items with submenus to aria-haspopup="true".
for ( i = 0, len = subMenus.length; i < len; i++ ) {
    subMenus[i].parentNode.setAttribute( 'aria-haspopup', 'true' );
}

// Each time a menu link is focused or blurred, toggle focus.
for ( i = 0, len = links.length; i < len; i++ ) {
    links[i].addEventListener( 'focus', toggleFocus, true );
    links[i].addEventListener( 'blur', toggleFocus, true );
}

/**
 * Sets or removes .focus class on an element.
 */
function toggleFocus() {
    var self = this;

    // Move up through the ancestors of the current link until we hit .nav-menu.
    while ( -1 === self.className.indexOf( 'nav-menu' ) ) {

        // On li elements toggle the class .focus.
        if ( 'li' === self.tagName.toLowerCase() ) {
            if ( -1 !== self.className.indexOf( 'focus' ) ) {
                self.className = self.className.replace( ' focus', '' );
            } else {
                self.className += ' focus';
            }
        }

        self = self.parentElement;
    }
}
    function openCity(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }

/**
 * Toggles `focus` class to allow submenu access on tablets.
 */
( function( container ) {
    var touchStartFn, i,
        parentLink = container.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );

    if ( 'ontouchstart' in window ) {
        touchStartFn = function( e ) {
            var menuItem = this.parentNode, i;

            if ( ! menuItem.classList.contains( 'focus' ) ) {
                e.preventDefault();
                for ( i = 0; i < menuItem.parentNode.children.length; ++i ) {
                    if ( menuItem === menuItem.parentNode.children[i] ) {
                        continue;
                    }
                    menuItem.parentNode.children[i].classList.remove( 'focus' );
                }
                menuItem.classList.add( 'focus' );
            } else {
                menuItem.classList.remove( 'focus' );
            }
        };

        for ( i = 0; i < parentLink.length; ++i ) {
            parentLink[i].addEventListener( 'touchstart', touchStartFn, false );
        }
    }
}( container ) );

    function initMainNavigation( container ) {
    // Add dropdown toggle that display child menu items.
    container.find( '.menu-item-has-children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' );

    // Toggle buttons and submenu items with active children menu items.
    container.find( '.current-menu-ancestor > button' ).addClass( 'toggle-on' );
    container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' );

    container.find( '.dropdown-toggle' ).click( function( e ) {
        var _this = $( this );
        e.preventDefault();
        _this.toggleClass( 'toggle-on' );
        _this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
        _this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
        _this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );
    } );
}
initMainNavigation( $( '.main-navigation' ) );

// Re-initialize the main navigation when it is updated, persisting any existing submenu expanded states.
$( document ).on( 'customize-preview-menu-refreshed', function( e, params )    {
    if ( 'primary' === params.wpNavMenuArgs.theme_location ) {
        initMainNavigation( params.newContainer );

        // Re-sync expanded states from oldContainer.
        params.oldContainer.find( '.dropdown-toggle.toggle-on' ).each(function() {
            var containerId = $( this ).parent().prop( 'id' );
            $( params.newContainer ).find( '#' + containerId + ' > .dropdown-toggle' ).triggerHandler( 'click' );
        });
    }
});

    $(document).ready(function(){
       $("li.current-menu-item").click(function(){
            $(this).addClass("closed-menu");
        });
    });   

} )( jQuery );

Perhaps one of the functions is preventing functionalities on the new code am trying to add.

Answer 1

If your items are dynamically added use event delegation & don't forget to prevent the default click

$(document).ready(function(){
   $('body').on('click','li.current-menu-item', function(e){ 
       e.preventDefault();
       $(this).addClass('closed-menu-item');
   });
 });