事件委托中ToggleClass失效：点赞按钮点击后状态无法切换

问题原因 #

你通过$(document).on("click", ".thumbup", ...)绑定事件委托，第一次点击按钮时，toggleClass("thumbup thumb-up-black")会把按钮的thumbup类移除，替换成thumb-up-black类。此时按钮已经没有thumbup类了，后续点击时，事件委托的选择器.thumbup无法匹配到这个按钮，导致事件处理函数不再执行，所以状态无法继续切换。

解决方案 #

推荐采用保留基础类，仅切换状态类的方式，这是最简洁高效的处理方法：

修改JavaScript代码如下：

let rating_dict = { "ratingUp": {} };

$(document).on("click", ".thumbup", function() {
    const buttonid = $(this).data("index");
    // 只切换状态类thumb-up-black，保留基础类thumbup
    $(this).toggleClass("thumb-up-black");
    rating_dict.ratingUp[buttonid] = !rating_dict.ratingUp[buttonid];
});

HTML无需改动，按钮初始类保持thumbup。点击时仅添加/移除thumb-up-black类，这样事件委托的.thumbup选择器始终能匹配到按钮，确保每次点击都能触发事件处理函数。

如果一定要切换基础类，也可以把事件委托绑定到更稳定的上层元素（比如.rating-img），并在处理函数中判断目标元素：

let rating_dict = { "ratingUp": {} };

$(document).on("click", ".rating-img button", function() {
    const $btn = $(this);
    // 判断是否为点赞按钮（匹配两种状态的类）
    if ($btn.hasClass("thumbup") || $btn.hasClass("thumb-up-black")) {
        const buttonid = $btn.data("index");
        $btn.toggleClass("thumbup thumb-up-black");
        rating_dict.ratingUp[buttonid] = !rating_dict.ratingUp[buttonid];
    }
});

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