JQuery中带类名按钮的click事件无法触发问题求助

我帮你排查下代码里的问题，主要有两个关键点会导致点击事件异常：

1. 动态元素的事件绑定问题 #

如果你的按钮是通过Thymeleaf动态渲染（比如页面加载后才生成DOM节点），直接用$("button.like_button").on('click', ...)是绑定不上的——因为$(document).ready()执行时，这些动态元素还没出现在DOM里。

解决办法是用事件委托，把事件绑定到一个始终存在的父元素（比如document或者更接近的静态容器），让它监听子元素的点击：

$(document).ready(function (){
  // 事件委托：绑定到document，监听.like_button的点击
  $(document).on('click', 'button.like_button', function (){
    // 后续逻辑写在这里
  });
});

2. 连续if导致的逻辑冲突 #

你代码里的两个if是独立执行的：当按钮有like类时，执行点赞逻辑并切换到unlike类，但紧接着第二个if会立刻检测到unlike类，触发取消点赞的逻辑——相当于两次请求抵消，还会导致状态来回跳。

改成else if让两个逻辑互斥：

$(document).ready(function (){
  $(document).on('click', 'button.like_button', function (){
    let email = $(this).val();
    console.log("Got In");

    if($(this).hasClass("like")){
      console.log("Got In if Statement for like");
      fetch("/api/like/" + email)
        .then(res => console.log("Response, " + res))
        .catch(err => console.log("Error, " + err))
      $(this).removeClass("like").addClass("unlike");
    } else if($(this).hasClass("unlike")){ // 改为else if，确保逻辑互斥
      console.log("Got In if Statement for unlike");
      fetch("/api/unlike/" + email)
        .then(res => console.log("Response, " + res))
        .catch(err => console.log("Error, " + err))
      $(this).removeClass("unlike").addClass("like");
    }
  });
});

额外调试小技巧 #

• 按F12打开浏览器控制台，看Console标签有没有报错（比如jQuery没加载、语法错误）
• 在$(document).ready()里加一行console.log($("button.like_button").length)，如果输出0，说明元素是动态生成的，必须用事件委托
• 查看页面渲染后的HTML源码，确认Thymeleaf正确生成了like/unlike类和value属性

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