求助：JQuery绑定li元素的onclick事件在当前场景下失效

AI 小北

2026-5-20

解决jQuery点击li元素无响应的问题

嘿，我帮你排查下这个很容易踩的小坑～结合你的代码，最可能的几个低级错误和解决办法如下：

1. 优先检查：是否正确引入了jQuery库

这是最常见的疏忽！如果你的页面里还没加载jQuery，那所有$相关的代码都会直接失效。你可以快速验证：

打开浏览器开发者工具（按F12），切换到Console面板，输入$回车，如果返回Uncaught ReferenceError: $ is not defined，就说明确实没加载jQuery。
解决办法：在你的jQuery代码之前引入jQuery文件，比如：

<!-- 可以用本地存放的jQuery文件，或者官方稳定版本的资源 -->
<script src="jquery.min.js"></script>

2. 确认DOM加载时机是否正确

虽然你用了$(function(){})（这是$(document).ready()的简写），但如果你的脚本标签放在HTML结构的最前面（比如<head>里），有时候可能还是会出现DOM未完全渲染的情况。可以试试：

把你的脚本标签移到</body>标签的上方，确保HTML元素都已经渲染完成后再执行jQuery代码。
或者换成完整的ready写法，效果一致，但有时候能避免一些奇怪的加载顺序问题：

$(document).ready(function() { 
  $("#statLateralMenu li").click(function() { 
    alert( "A" ); 
    $("#statLateralMenu li").removeClass("selected"); 
    $(this).addClass("selected"); 
  }); 
});

3. 尝试事件委托写法（兼容静态/动态元素）

如果你的li元素是后续动态生成的（哪怕现在是静态的，这个写法也更健壮），可以把事件绑定到父元素上，利用事件冒泡来触发：

$(function() { 
  $("#statLateralMenu").on("click", "li", function() { 
    alert( "A" ); 
    $("#statLateralMenu li").removeClass("selected"); 
    $(this).addClass("selected"); 
  }); 
});