jQuery 动态添加 class 后绑定的点击事件不生效，该如何解决？

你使用的$('.alert').click()是直接绑定事件的写法，只会在代码首次执行时，给当前DOM中已经存在、且带有alert类的元素绑定点击事件。Button C的alert类是点击Button B之后才动态添加的，初始绑定时不满足匹配条件，因此没有绑定对应的事件处理函数，点击自然不会触发弹窗。

使用jQuery的事件委托机制，将事件绑定到页面中始终存在的父级元素上（可以是document，也可以是这些按钮的上层静态父容器，后者性能更优），再指定目标选择器即可适配动态新增/修改类的元素。

修改后的JS代码如下：

// 事件委托到document，匹配所有带有alert类的元素，包括后续动态添加的
$(document).on('click', '.alert', function(){
  alert("alert");
});

$('.secondButton').click(function() {
  $('.thirdButton').addClass('alert');
});

事件委托依赖事件冒泡机制：点击页面元素时，事件会逐层向上冒泡到绑定了监听的父元素，父元素会自动校验触发事件的目标是否匹配指定的选择器，匹配成功就执行对应的处理逻辑。你使用的jQuery 1.7.1版本已经支持on方法的委托写法，无需调整依赖版本。

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