动态评论点赞/点踩按钮jQuery点击事件绑定失效求助

这个问题我太熟了——你踩了jQuery事件委托里一个很容易犯的坑！核心原因是你用了无参数的$(document).off()，它会直接移除document上所有已绑定的事件处理程序，导致后写的绑定代码把前面的全部覆盖，自然只能触发最后绑定的那个事件。

具体解决办法 #

1. 精准解绑特定事件（推荐）

不要用无参数的off()，而是针对你要绑定的按钮选择器和事件类型来解绑，这样只会清除目标元素的相关事件，不会影响其他绑定：

// 只解绑.upvote按钮的click事件，再重新绑定
$(document).off('click', '.upvote').on('click', '.upvote', function() {
    addRating(1);
});

// 只解绑.downvote按钮的click事件，再重新绑定
$(document).off('click', '.downvote').on('click', '.downvote', function() {
    addRating(-1);
});

2. 无需解绑的简化写法（如果没有重复绑定问题）

如果你的场景里不存在重复绑定事件的情况（比如不会多次执行这段绑定代码），其实可以直接省略off()，因为事件委托绑定在document上，动态生成的评论按钮完全能正常触发事件：

$(document).on('click', '.upvote', function() {
    addRating(1);
});

$(document).on('click', '.downvote', function() {
    addRating(-1);
});

这种写法下两个事件委托互不干扰，因为它们针对不同的按钮选择器。

3. 进阶：用事件命名空间更安全

如果担心后续有其他同类型事件冲突，可以给事件加上命名空间，解绑时只针对这个命名空间操作，彻底避免影响其他事件：

// 绑定带rating命名空间的click事件
$(document).off('click.rating', '.upvote').on('click.rating', '.upvote', function() {
    addRating(1);
});

$(document).off('click.rating', '.downvote').on('click.rating', '.downvote', function() {
    addRating(-1);
});

为什么原来的写法失效？ #

当你执行$(document).off().on(...)时，第一个off()没有任何参数，会把document上所有的click事件（包括之前绑定的.upvote按钮事件）全部清除，然后再绑定新的.downvote事件；调换顺序后同理，最后只有最后一次绑定的事件能生效。

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