theme development – can’t add EVENT LISTENER to a element

Question

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.

enter image description here

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.

enter image description here

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 🙂

0
Jai Shankar 6 months 2022-02-27T02:23:19-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse