I'm trying to add a click eventListener to a element in homepage, it doesn't work. the event is not even added to the element.

the above picture shows the html of the homepage. where I wanted to add click eventListener to li element with id = "menu-item-297". 1st I tried to add the click event using browser console.

still nothing changed in homepage. homepage remain same like the 1st image. I'm using woostify theme. so I checked their source code. the navbar uses navigation.min.js script. so I explore the source code and add the same eventListener code there. saved and refresh. yet still nothing change. no eventListener is added to the li element.

here is the navigation.min.js code

/**
 * Navigation.js
 *
 * @package woostify
 */

'use strict';


// Open Menu mobile.
function nav() {
    
    
    var menu = document.getElementById("menu-item-297");
    menu.addEventListener("click", function(e){console.log("clicked");});
        
    var menuToggleBtn = document.getElementsByClassName( 'toggle-sidebar-menu-btn' );

    if ( ! menuToggleBtn.length ) {
        return;
    }

    for ( var i = 0, j = menuToggleBtn.length; i < j; i++ ) {
        menuToggleBtn[i].addEventListener(
            'click',
            function() {
                document.documentElement.classList.add( 'sidebar-menu-open' );
                closeAll();
            }
        );
    }
}

// Accordion menu on sidebar.
function sidebarMenu( node ) {
    
    
    var menu = document.getElementById("menu-item-297");

    menu.addEventListener('click',function(e){
      console.log('clicked');
    });
    
    
    var selector = ( arguments.length > 0 && undefined !== arguments[0] ) ? jQuery( node ) : jQuery( '.sidebar-menu .primary-navigation' ),
        arrow    = selector.find( '.arrow-icon' );

    jQuery( arrow ).on(
        'click',
        function( e ) {
            e.preventDefault();

            var t        = jQuery( this ),
                siblings = t.parent().siblings( 'ul' ),
                arrow    = t.parent().parent().parent().find( '.arrow-icon' ),
                subMenu  = t.parent().parent().parent().find( 'li .sub-menu, li .sub-mega-menu' );

            if ( siblings.hasClass( 'show' ) ) {
                siblings.slideUp(
                    200,
                    function() {
                        jQuery( this ).removeClass( 'show' );
                    }
                );

                // Remove active state.
                t.removeClass( 'active' );
            } else {
                subMenu.slideUp(
                    200,
                    function() {
                        jQuery( this ).removeClass( 'show' );
                    }
                );
                siblings.slideToggle(
                    200,
                    function() {
                        jQuery( this ).toggleClass( 'show' );
                    }
                );

                // Add active state for current arrow.
                arrow.removeClass( 'active' );
                t.addClass( 'active' );
            }
        }
    );
}

// Fallback for other dev.
function navFallback() {
    if ( window.matchMedia( '( min-width: 992px )' ).matches ) {
        return;
    }

    var userArgent = navigator.userAgent;

    if ( userArgent && ( userArgent.includes( 'Android' ) || userArgent.includes( 'Mobile' ) ) ) {
        return;
    }

    document.documentElement.classList.remove( 'cart-sidebar-open', 'sidebar-menu-open' );
}

document.addEventListener(
    'DOMContentLoaded',
    function() {
        nav();
        sidebarMenu();
    }
);

window.addEventListener( 'resize', navFallback );

I'm new to wordpress. what mistake I'm making? by the way I'm trying to add a click event to a woostify theme navigation bar. do theme override my code? I don't what happening. can someone explain whats going on. thanks :)

I'm trying to add a click eventListener to a element in homepage, it doesn't work. the event is not even added to the element.

the above picture shows the html of the homepage. where I wanted to add click eventListener to li element with id = "menu-item-297". 1st I tried to add the click event using browser console.

still nothing changed in homepage. homepage remain same like the 1st image. I'm using woostify theme. so I checked their source code. the navbar uses navigation.min.js script. so I explore the source code and add the same eventListener code there. saved and refresh. yet still nothing change. no eventListener is added to the li element.

here is the navigation.min.js code

/**
 * Navigation.js
 *
 * @package woostify
 */

'use strict';


// Open Menu mobile.
function nav() {
    
    
    var menu = document.getElementById("menu-item-297");
    menu.addEventListener("click", function(e){console.log("clicked");});
        
    var menuToggleBtn = document.getElementsByClassName( 'toggle-sidebar-menu-btn' );

    if ( ! menuToggleBtn.length ) {
        return;
    }

    for ( var i = 0, j = menuToggleBtn.length; i < j; i++ ) {
        menuToggleBtn[i].addEventListener(
            'click',
            function() {
                document.documentElement.classList.add( 'sidebar-menu-open' );
                closeAll();
            }
        );
    }
}

// Accordion menu on sidebar.
function sidebarMenu( node ) {
    
    
    var menu = document.getElementById("menu-item-297");

    menu.addEventListener('click',function(e){
      console.log('clicked');
    });
    
    
    var selector = ( arguments.length > 0 && undefined !== arguments[0] ) ? jQuery( node ) : jQuery( '.sidebar-menu .primary-navigation' ),
        arrow    = selector.find( '.arrow-icon' );

    jQuery( arrow ).on(
        'click',
        function( e ) {
            e.preventDefault();

            var t        = jQuery( this ),
                siblings = t.parent().siblings( 'ul' ),
                arrow    = t.parent().parent().parent().find( '.arrow-icon' ),
                subMenu  = t.parent().parent().parent().find( 'li .sub-menu, li .sub-mega-menu' );

            if ( siblings.hasClass( 'show' ) ) {
                siblings.slideUp(
                    200,
                    function() {
                        jQuery( this ).removeClass( 'show' );
                    }
                );

                // Remove active state.
                t.removeClass( 'active' );
            } else {
                subMenu.slideUp(
                    200,
                    function() {
                        jQuery( this ).removeClass( 'show' );
                    }
                );
                siblings.slideToggle(
                    200,
                    function() {
                        jQuery( this ).toggleClass( 'show' );
                    }
                );

                // Add active state for current arrow.
                arrow.removeClass( 'active' );
                t.addClass( 'active' );
            }
        }
    );
}

// Fallback for other dev.
function navFallback() {
    if ( window.matchMedia( '( min-width: 992px )' ).matches ) {
        return;
    }

    var userArgent = navigator.userAgent;

    if ( userArgent && ( userArgent.includes( 'Android' ) || userArgent.includes( 'Mobile' ) ) ) {
        return;
    }

    document.documentElement.classList.remove( 'cart-sidebar-open', 'sidebar-menu-open' );
}

document.addEventListener(
    'DOMContentLoaded',
    function() {
        nav();
        sidebarMenu();
    }
);

window.addEventListener( 'resize', navFallback );

I'm new to wordpress. what mistake I'm making? by the way I'm trying to add a click event to a woostify theme navigation bar. do theme override my code? I don't what happening. can someone explain whats going on. thanks :)

• theme-development
• javascript
• jquery
• navigation

• Shouldn’t you be adding the event to the a tag, not the li? Regardless, this does not appear to be related to WordPress. stackoverflow.com would be more appropriate for this question. – Jacob Peattie Commented Feb 27, 2022 at 7:56
• I added a eventListener to span tag also. still it not working. event doesn't added to the element. – Jai Shankar Commented Feb 27, 2022 at 8:02

1 Answer 1

I fix this myself. I don't know I'm right or wrong. In Wordpress plain JS script doesn't work. I don't know why.

I tried to solve the above mentioned problem using jQuery and it worked. both are JS only.but still I don't know why. I'm begineer.

check below image:

the event is added successfully: