jQuery无法找到span元素的类？绑定点击事件断点未触发排查

嘿，问题出在你的选择器写法上！你用的.k-icon .k-filter是后代选择器，它会去找带有.k-icon类的元素内部的、带.k-filter类的子元素。但看你的HTML，<span>是同时拥有这两个类的（<span class="k-icon k-filter"></span>），所以正确的选择器应该是不带空格的多类选择器：.k-icon.k-filter。

修正后的JavaScript代码 #

$(document).on("click", ".k-icon.k-filter", function () { 
    debugger; 
});

额外排查建议 #

如果改完选择器还是没触发断点，不妨检查这几点：

• 确认jQuery已经正确加载，控制台有没有报错说$未定义
• 看看父元素<a>标签有没有写阻止事件冒泡的代码（比如event.stopPropagation()），要是有的话，点击span的事件会被父元素拦下来
• 可以给事件处理函数加上e.preventDefault()，避免a标签的默认跳转行为干扰调试
• 检查一下这个span是不是被其他元素覆盖了（比如z-index更高的层），导致你点的时候其实没点到它

给你个完整的测试示例，你可以试试：

<a class="k-grid-filter k-state-active" href="#" tabindex="-1">
    <span class="k-icon k-filter">点击测试</span>
</a>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).on("click", ".k-icon.k-filter", function (e) { 
    e.preventDefault(); // 阻止a标签跳转，避免页面刷新
    debugger; 
    console.log("点击事件成功触发！");
});
</script>

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