jQuery绑定click/tap/touchstart事件在移动端无法生效问题

核心问题与修复方案： #

1. HTML ID重复隐患

当前多个<div>使用了同一个ID brxe-bilrmd，HTML规范要求ID必须唯一——虽然你用class选择器实现切换逻辑，暂时不影响功能，但这可能引发其他脚本冲突，建议给每个容器设置唯一ID（比如pricing-faq-container、plans-faq-container）。

2. 移动端事件绑定冲突

你绑定了click tap touchstart三类事件，在移动端可能触发多次（比如touchstart触发后又触发click），导致逻辑混乱。建议用更通用的pointerup事件替代（兼容鼠标与触摸设备），或者仅保留click并通过CSS消除移动端300ms点击延迟。

3. 简化切换逻辑（减少冗余代码）

重复的hide()/show()可以简化为：先统一隐藏所有FAQ容器，再显示目标容器，代码更简洁且不易出错。

修复后代码示例： #

HTML（修正ID重复）

<span id="brxe-wlyncw" class="brxe-button main-cta-button pricing-btn faq-btn bricks-button bricks-background-primary">Pricing</span>

<div id="pricing-faq-container" class="brxe-container pricing-faq"></div>
<div id="plans-faq-container" class="brxe-container plans-faq"></div>
<div id="seo-faq-container" class="brxe-container seo-faq"></div>
<div id="websites-faq-container" class="brxe-container websites-faq"></div>

jQuery（优化事件与逻辑）

jQuery(document).ready(function($){
    // 用pointerup兼容所有输入设备
    $('.faq-btn').on('pointerup', function(event) {
        event.preventDefault();
        const $currentBtn = $(this);
        
        // 先隐藏所有FAQ容器
        $('.pricing-faq, .plans-faq, .seo-faq, .websites-faq').hide();
        
        // 根据按钮类名显示对应容器
        if($currentBtn.hasClass('pricing-btn')){
            $('.pricing-faq').show();
        } else if ($currentBtn.hasClass('plans-btn')){
            $('.plans-faq').show();
        } else if ($currentBtn.hasClass('seo-btn')){
            $('.seo-faq').show();
        } else if ($currentBtn.hasClass('websites-btn')){
            $('.websites-faq').show();
        }
    });
});

额外优化：扩大移动端触摸区域

如果按钮在移动端点击范围过小，添加CSS：

.faq-btn {
    touch-action: manipulation; /* 消除移动端300ms点击延迟 */
    padding: 12px 24px; /* 增大点击区域，按需调整 */
    position: relative;
}
/* 用伪元素进一步扩大可触摸范围 */
.faq-btn::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
}

测试建议： #

1. 在移动端浏览器开发者工具中，给事件函数添加console.log('按钮触发')，确认点击时是否执行了逻辑。
2. 检查页面是否有其他脚本（如弹窗、遮罩）阻止了点击事件冒泡。

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