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.

Provide minimalistic sample replicating your issue. Your code should work as expected. Maybe something else (other click handler bound on any ancestor) removes the class or these LI elements are added after the DOM is ready. — A. Wolff
– A. Wolff, Commented Sep 26, 2016 at 8:13

madalinivascu · Accepted Answer · 2016-09-26 08:10:39Z

2

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');
   });
 });

answered Sep 26, 2016 at 8:10

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joachim · Accepted Answer · 2016-09-26 08:12:24Z

0

Could it be so that your list items are loaded later into the DOM? In this case, you could use delegation:

function($) {

    $(document).ready(function()  {

        $('html,body').delegate('li.current-menu-item', 'click', function() {
            $(this).addClass('closed-menu-item');
        });

        console.log('jQuery is working correctly.');

    });
})(jQuery);

Also, make sure jQuery is loaded correctly, that's why I used

function($) {
    ...
})(jQuery)

as a wrapper.

answered Sep 26, 2016 at 8:12

Joachim

3191 silver badge9 bronze badges

Comments

Latsuj · Accepted Answer · 2016-09-26 08:14:51Z

0

I have tried your code :

<body>
<script src="jquery.js"></script>
<script src="main.js"></script>
<ul>
    <li class="current-menu-item">TEST 1</li>
    <li class="current-menu-item">TEST 2</li>
    <li class="current-menu-item">TEST 3</li>
    <li class="current-menu-item">TEST 4</li>
</ul>
</body>

And the script :

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

It works well, so I think there is something more in your code that break your functionnalities.

answered Sep 26, 2016 at 8:14

Latsuj

4791 gold badge5 silver badges14 bronze badges

2 Comments

Sidney Sousa Over a year ago

It is a WordPress site so perhaps one of the scripts is blocking that. will double check.

A. Wolff Over a year ago

@WosleyAlarico So on WP, $ reference is removed once window is loaded. This answer, passing $ as jQuery ref (.ready(function($)) would fix it BUT then you have an error message in your console you didn't tell us in question...

Alessio Cantarella · Accepted Answer · 2016-09-26 08:15:41Z

0

Please see below snippet it may help you.

$(document).ready(function() {
  $('li.current-menu-item').click(function() {
    $(this).addClass('closed-menu-item');
    alert("added in " + $(this).html());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="current-menu-item">Test1</li>
  <li class="current-menu-item">Test2</li>
  <li class="current-menu-item">Test3</li>
  <li class="current-menu-item">Test4</li>
</ul>

edited Sep 26, 2016 at 8:15

Alessio Cantarella

5,2413 gold badges31 silver badges37 bronze badges

answered Sep 26, 2016 at 8:11

Power Star

1,8942 gold badges16 silver badges30 bronze badges

Comments

a.hacker · Accepted Answer · 2016-09-26 08:27:48Z

0

//
method=$('elemant');
$(Document).ready(function()
{
     method.bind("click", function ()
     {
            methodClick($(this))
        });
        function methodClick(t)
        {
           //your code
        }

)};

answered Sep 26, 2016 at 8:27

a.hacker

11 bronze badge

Collectives™ on Stack Overflow

jquery on click function not working with list-items

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related