JQuery onClick仅触发一次：动态按钮点击失效求助

为什么首次点击有效，后续没反应？ #

问题出在你的事件委托绑定目标上。你现在把点击事件绑定在了.btn-group元素上，但每次AJAX请求成功后，你会用新的HTML替换掉.leanVote_target里的内容——这就把原来绑定了事件的.btn-group给移除了，新生成的.btn-group并没有被绑定任何点击事件，自然就没反应了。

怎么修复？ #

解决思路很简单：把事件委托绑定到不会被动态替换的上层容器上。看你的DOM结构，最外层的.btn-toolbar是始终存在的，不会被AJAX更新，所以我们把事件绑定到它上面，让它监听内部所有.voteButton的点击：

修改后的jQuery代码：

$(document).ready(function(){
  // 绑定到稳定的.btn-toolbar上，监听内部的.voteButton点击
  $(".btn-toolbar").on("click", '.voteButton', function( event ) {
    var parts = this.id.split("_"); // 用this比event.target更可靠，避免按钮内部子元素冒泡导致的错误
    sendVote({{comment.id}}, parts[0], parts[1]);
    console.log('点击触发了！'); // 测试用，确认事件生效
  });
});

补充小提示 #

• 事件委托的核心是利用事件冒泡机制，所以一定要选一个不会被删除/替换的父元素作为绑定目标，这样不管内部的按钮怎么更新，事件都能正常触发。
• 如果你的页面里还有其他类型的投票按钮组（比如credVote_target、controlVote_target对应的按钮），这个绑定方式同样能兼容它们的动态更新，不需要额外写重复代码。

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