无法为含指定文本的按钮触发jQuery .click()事件

你写的选择器能在开发者工具里正确匹配到目标span，但点击事件完全不触发，根源非常直接：作为父级的button元素带有原生disabled属性。
浏览器有固定的原生交互规则：只要是disabled状态的表单类元素（<button>、<input>、<select>这类），会直接拦截自身覆盖范围内的全部鼠标交互，哪怕DOM结构上能被选择器精准选中，实际点击时事件根本不会派发到内部的子元素上，自然绑定的回调永远不会执行。

根据你的业务场景，可以从以下两个方向选择适配的实现方案：

方案1：替换原生禁用属性，保留内部元素的可交互能力 #

不要给button设置原生disabled，改用自定义CSS类模拟按钮的禁用视觉效果，同时单独放开目标span的交互权限，既保留“未选尺寸时按钮不可提交”的视觉提示，又能让span正常响应点击：

• 修改HTML结构，移除button上的disabled属性，新增自定义的禁用类，同时给目标span加专属标识：

<button type="submit" name="add" id="add-to-cart" class="action_button add_to_cart v-center is-disabled" data-variantcount="44" data-label="Add to Cart">
  <span class="text" data-role="size-trigger">Choose a Size</span>
</button>

• 补充对应CSS，控制禁用态的视觉表现，单独放开目标span的交互权限：

.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  /* 禁止按钮除触发span外的所有区域交互 */
  pointer-events: none;
}
/* 单独给需要绑定点击的span开放交互权限 */
.is-disabled [data-role="size-trigger"] {
  pointer-events: auto;
  cursor: pointer;
}

• 原本绑定的jQuery代码不需要做任何修改，就能正常触发点击回调。

方案2：必须保留原生disabled属性时的事件绑定方式 #

因为被禁用的button本身无法接收、转发内部的事件，直接在内部元素绑事件是无效的。如果业务上不能移除button的disabled属性，可以把点击事件绑定到button的上层不受禁用影响的容器上，通过判断点击的位置是否命中目标span区域触发逻辑：

• 首先给目标span加专属标识，方便定位判断：

<button type="submit" name="add" id="add-to-cart" class="action_button add_to_cart v-center" data-variantcount="44" data-label="Add to Cart" disabled>
  <span class="text" data-role="size-trigger">Choose a Size</span>
</button>

• 把事件绑定到不受disabled影响的外层页面节点上，触发后判断点击位置是否对应目标span：

$(document).on('click', function(e) {
  const clickTarget = e.target;
  // 判断点击位置是否命中目标span
  if ($(clickTarget).is('[data-role="size-trigger"]') || $(clickTarget).find('[data-role="size-trigger"]').length) {
    console.log("it has been clicked");
  }
});

• DOM选择器能匹配到元素，不代表元素一定能正常接收交互事件：浏览器的原生交互拦截规则优先级高于jQuery的事件绑定逻辑，只要元素被原生规则拦截了鼠标事件，哪怕选择器写得完全正确，回调也不会执行。
• 不建议长期依赖:contains()这类基于文本内容的选择器做业务绑定：后续页面文本的微调就可能导致选择器失效，给目标元素加专属的自定义属性（比如data-xxx标识）的稳定性远高于文本匹配。

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