移动端点击指定菜单触发Popup弹窗失效，相关jQuery代码问题咨询

问题原因 #

• 多数网站主题的移动端菜单是独立克隆生成的DOM结构，和桌面端菜单的类名、层级不一致，DOM ready执行时移动端菜单还未渲染完成，导致你添加的属性和类没有生效在移动端的菜单项上
• 部分弹窗插件的事件绑定执行时机早于你的属性添加逻辑，后添加对应类的元素不会被自动绑定弹窗触发事件
• 移动端默认优先响应touch事件，部分场景下click事件会被移动端菜单的默认交互拦截

修复代码方案 #

方案1：直接通过事件委托手动触发弹窗，兼容性最高

jQuery(document).ready(function() {
    // 同时适配桌面和移动端的点击、touch事件
    jQuery(document).on('click touchstart', '.menu-item-10484 a', function(e) {
        e.preventDefault();
        // 直接调用插件的弹窗打开方法，根据你的插件实际API调整即可，以下是通用示例
        jQuery('#paoc-pro-modal-10420').show();
        // 若插件有公开调用方法，可替换为官方方法，例：paocPro.openModal('10420');
    });
});

方案2：适配动态渲染的移动端菜单，延迟执行属性添加逻辑

jQuery(document).ready(function() {
    // 延迟500ms执行，等待移动端菜单渲染完成
    setTimeout(function() {
        // 可同时匹配桌面和移动端的菜单项，若移动端菜单项类名不同自行替换即可
        jQuery('.menu-item-10484 a, .mobile-menu .menu-item-10484 a').each(function() {
            jQuery(this).attr('data-target', 'paoc-pro-modal-10420');
            jQuery(this).addClass('paoc-pro-popup paoc-pro-popup-button');
        });
    }, 500);
});

排查验证步骤 #

1. 打开移动端开发者工具，检查对应菜单项的a标签是否已成功添加data-target属性和paoc-pro-popup类
2. 如果属性和类都已添加仍不触发，优先使用方案1的手动绑定逻辑，无需依赖插件的自动绑定机制

内容的提问来源于stack exchange，提问作者Ashish Singh