jQuery类选择器绑定按钮click事件不生效如何解决

问题复现代码片段：
JavaScript 代码：

$(document).ready(function() {
  $(".single_add_to_cart_button").click(function() {
    alert("Merge");
  });
});

HTML 代码：

<script src="jQuery库引入路径"></script>
<button type="submit" name="add-to-cart" value="17915" class="single_add_to_cart_button button alt">Adaugă în coș</button>

排查第一步先按F12打开浏览器开发者工具，切到Console面板看报错，大部分问题能直接定位：

• 若控制台报$ is not defined：是脚本加载顺序错误，自定义的jQuery代码必须放在jQuery库引入标签的后面。如果代码写在jQuery引入之前，执行绑定逻辑时jQuery还没加载完成，$对象不存在，事件绑定直接失效。
• 若控制台报语法错误（比如漏写括号、引号不闭合、同脚本块其他代码有语法问题）：会导致整个脚本解析失败，写的事件绑定代码根本不会运行，修复对应语法错误即可。
• 控制台无报错但事件不触发，优先检查按钮是否为动态生成的非初始静态元素：如果按钮不是页面初始加载就存在的静态元素（比如接口返回后渲染、其他JS动态插入、页面局部刷新替换出来的元素，电商站点的加购按钮很常出现局部刷新替换的情况），$(document).ready执行时按钮还没出现在DOM树里，$(".single_add_to_cart_button")选不到目标元素，自然绑不上事件。这种情况换成事件委托写法即可，把事件绑定到页面初始就存在的父元素上（最稳妥可以绑定到document）：

  // 替换原有直接绑定的写法
  $(document).on('click', '.single_add_to_cart_button', function() {
    alert("Merge");
  });
  

• 事件被其他逻辑拦截：
  • 该按钮是submit类型，如果页面其他脚本给按钮或按钮所在表单绑定了提交事件，提前执行了e.stopImmediatePropagation()或者return false，会阻止后续绑定的click事件触发。
  • 其他脚本执行了$(".single_add_to_cart_button").off('click')类的逻辑，把你绑定的点击事件解绑了。
• 点击没有实际落到按钮上：如果按钮上方有透明遮罩、其他高优先级定位元素覆盖在按钮上，视觉上点的是按钮，实际点击事件触发在覆盖层元素上。可以用开发者工具左上角的元素选择箭头，点页面上按钮的位置，看选中的是不是目标button元素即可判断。
• 选择器匹配失效：可以在控制台直接执行$(".single_add_to_cart_button").length，如果返回0说明没选到元素，检查实际页面里按钮的class名是否和选择器完全一致，注意有没有多余空格、特殊字符未转义、动态拼接的类名导致匹配失败。

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