移动端浏览器及Google Chrome中jQuery点击事件失效求助

我开发了一套移动端下拉菜单的jQuery代码，该代码在Firefox浏览器中运行正常，但在Google Chrome及移动端浏览器中完全无法生效。网站已上线，代码已绑定事件监听但控制台未出现任何报错，无法定位问题原因。网站地址：https://excelwebdesign.ie

以下是我的代码：

jQuery(document).ready(function(){
    jQuery(".menu-toggle").click(function(){
        if(jQuery(this).hasClass("open")){
            jQuery(this).removeClass("open");
            jQuery("body").removeClass("navigation-open");
            
            jQuery("#menu-main-menu-mobile").children("li").hide();
        }else{
            jQuery(this).addClass("open");
            jQuery("body").addClass("navigation-open");
            
            jQuery("#menu-main-menu-mobile").children("li").each(function(i) {
                jQuery(this).delay(100 * i).fadeIn(500);
            });
        }
    });
    
    jQuery("#menu-main-menu-mobile").children("li.menu-item-has-children").each(function(){
        var thismn = jQuery(this);
        
        thismn.children("a").on("click", function(e){
            e.preventDefault();

            jQuery("#navigation").find(".sub-menu.open").removeClass("open");
            thismn.children(".sub-menu").addClass("open");
            jQuery(".scwmobilemenu_head").html('<i class="fa fa-chevron-left"></i> Back');
            
            thismn.parent("ul").addClass("opensubmenu opensubmenu_level1");
            
            jQuery("#menu-main-menu-mobile").children("li").each(function(i) {
                jQuery(this).children("a").delay(100 * i).animate({
                    left: -50,
                    opacity: 0
                }, 500);
            });
            thismn.children(".sub-menu").children("li:not(.menu-item-object-ubermenu-custom)").each(function(i) {
                jQuery(this).delay(200 * i).fadeIn(1000);
            });
        });
        
        thismn.find("li.menu-item-has-children").each(function(){
            var thismnlv2 = jQuery(this);
            
            thismnlv2.children("a").click(function(e){
                e.preventDefault();
                
                thismnlv2.children(".sub-menu").addClass("open");
                thismnlv2.parent("ul").addClass("opensubmenu opensubmenu_level2");
                
                jQuery(".opensubmenu_level2").children("li").each(function(i) {
                    jQuery(this).children("a").delay(100 * i).animate({
                        left: -50,
                        opacity: 0
                    }, 500);
                });
                thismnlv2.children(".sub-menu").children("li:not(.menu-item-object-ubermenu-custom)").each(function(i) {
                    jQuery(this).delay(200 * i).fadeIn(1000);
                });
            });
        });
    });
    
    jQuery(".scwmobilemenu_head").click(function(){
        if(jQuery(".opensubmenu").length > 1){
            jQuery(".opensubmenu_level2").find(".sub-menu.open").children("li").fadeOut();
            jQuery(".opensubmenu_level2").children("li").each(function(i) {
                jQuery(this).children("a").delay(100 * i).animate({
                    left: 0,
                    opacity: 1
                }, 500);
            });
            
            jQuery(".opensubmenu_level2").find(".sub-menu.open").removeClass("open");
            jQuery(".opensubmenu_level2").removeClass("opensubmenu").removeClass("opensubmenu_level2");
        }else{
            jQuery(".opensubmenu_level1").find(".sub-menu.open").children("li").fadeOut();
            jQuery("#menu-main-menu-mobile").children("li").each(function(i) {
                jQuery(this).children("a").delay(100 * i).animate({
                    left: 0,
                    opacity: 1
                }, 500);
            });
            
            jQuery(".opensubmenu_level1").find(".sub-menu.open").removeClass("open");
            jQuery(".opensubmenu_level1").removeClass("open").removeClass("opensubmenu").removeClass("opensubmenu_level1");
            jQuery(this).html('Menu');
        }
    });
});

排查建议 #

• 调整事件绑定时机：替换document.ready为jQuery(window).on('load', function(){...})，确保页面所有资源（包括动态加载的DOM）都加载完成后再绑定事件
• 改用事件委托：对于菜单这类可能动态生成的元素，使用事件委托写法，比如将thismn.children("a").on("click", ...)改为jQuery('#menu-main-menu-mobile').on('click', 'li.menu-item-has-children > a', function(e){...})，避免直接绑定在未完全渲染的元素上
• 检查CSS兼容性：在Chrome开发者工具中查看移动端模式下的元素样式，确认#menu-main-menu-mobile或其子元素是否被display: none、visibility: hidden或pointer-events: none等样式阻止交互
• 添加触摸事件支持：移动端浏览器优先响应触摸事件，修改点击事件绑定为jQuery(".menu-toggle").on('click touchstart', function(){...})，同时可以添加防重复触发逻辑：

  jQuery(".menu-toggle").on('click touchstart', function(e){
      e.preventDefault();
      if(e.type === 'touchstart') jQuery(this).off('click'); // 避免重复触发
      // 原有逻辑...
  });
  

• 验证jQuery版本：检查当前使用的jQuery版本是否存在Chrome兼容性问题，尝试升级到最新稳定版

内容的提问来源于stack exchange，提问作者dung nguyen