无法将事件侦听器添加到元素

时间:2022-02-27 作者:Jai Shankar

我正在尝试将click eventListener添加到主页中的元素,但它不起作用。事件甚至没有添加到元素中。

enter image description here

上图显示了主页的html。我想将click eventListener添加到id为“的li元素”;菜单项-297“;。首先,我尝试使用浏览器控制台添加click事件。

enter image description here

主页仍然没有任何变化。主页保持与第一幅图像相同。我用的是woostify主题。所以我检查了他们的源代码。导航栏使用导航。min.js脚本。因此,我研究了源代码并在那里添加了相同的eventListener代码。已保存并刷新。但仍然没有什么变化。没有向li元素添加eventListener。

这是导航。min.js代码

/**
 * 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 );
我是wordpress的新手。我犯了什么错误?顺便说一下,我正在尝试向woostify主题导航栏添加一个点击事件。主题是否覆盖我的代码?我不知道发生了什么事。有人能解释一下发生了什么事吗。谢谢:)

1 个回复
SO网友:Jai Shankar

我自己解决这个问题。我不知道我是对还是错。在Wordpress中,普通JS脚本不起作用。我不知道为什么。

我尝试使用jQuery解决上述问题,结果成功了。两者都是仅JS。但我仍然不知道为什么。我是贝吉纳。

检查下图:

enter image description here

已成功添加事件:

enter image description here