添加Ajax后jQuery失效问题求助（Node.js、PUG环境）

看起来你在给博客实现点赞功能时遇到了jQuery失效的坑，我帮你梳理几个最可能的原因和对应的解决办法：

1. 检查脚本加载顺序 #

Materialize 1.0.0-beta依赖jQuery才能正常工作，如果加载顺序错了，不仅Materialize会出问题，你的自定义Ajax代码也会失效。正确的加载顺序应该是：

<!-- 1. 先加载jQuery核心库 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- 2. 再加载Materialize的JS文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- 3. 最后加载你的自定义点赞Ajax脚本 -->
<script src="../scripts/like-handler.js"></script>

2. 改用事件委托绑定点击事件 #

如果你的文章列表是动态渲染的（比如从数据库拉取后生成DOM），直接用$('[name="post_id"]').click()绑定事件会失效，因为绑定代码执行时目标元素还没出现在DOM里。这时候要用事件委托：

$(document).on('click', '[name="post_id"]', function(e) {
  // 阻止链接默认跳转行为，避免中断Ajax请求
  e.preventDefault();
  
  const postId = $(this).attr('name');
  const $this = $(this); // 保存当前元素引用，避免success回调中this指向变化

  // 发送点赞请求
  $.ajax({
    url: '/api/posts/like', // 替换成你server.js中处理点赞的POST路由
    method: 'POST',
    data: { postId: postId },
    success: function(res) {
      // 更新页面上的点赞数显示
      $this.text(res.updatedLikes);
    },
    error: function(err) {
      console.error('点赞请求失败:', err);
    }
  });
});

3. 排查jQuery冲突问题 #

如果页面中还有其他JS库（比如Prototype、Zepto），可能会和jQuery的$标识符冲突。可以通过两种方式解决：

• 使用jQuery.noConflict()释放$的控制权，改用jQuery代替：

jQuery.noConflict();
jQuery(document).on('click', '[name="post_id"]', function(e) {
  // 这里用jQuery代替$
});

• 用自执行函数包裹代码，保留内部的$别名：

(function($) {
  $(document).on('click', '[name="post_id"]', function(e) {
    // 内部可以正常使用$
  });
})(jQuery);

4. 查看控制台报错信息 #

打开浏览器开发者工具（F12）的Console标签，看看有没有具体的错误提示：

• 如果显示$ is not defined：说明jQuery没加载成功，检查CDN链接是否有效，或者本地文件路径是否正确
• 如果显示404错误：说明Ajax请求的路由地址写错了，和server.js中的POST路由对应不上
• 如果显示跨域错误：确认你的前端页面和server端运行在同一个域名端口下，或者配置了CORS

最后提醒下：确保server.js处理POST请求后，返回正确的JSON格式响应（比如包含更新后的点赞数字段），这样前端才能正确更新页面显示。

内容的提问来源于stack exchange，提问作者programmer wanna be