动态修改CSS类后，如何让jQuery绑定的新类事件生效？

核心原因 #

你遇到的问题源于jQuery直接事件绑定的特性：

• 页面加载时，$('.btn').on('click', ...)会将点击事件直接绑定到当时DOM中存在的所有.btn元素上。即便后续你移除了.btn类、添加了.btnDel类，这个事件已经附着在元素本身，不会随类名变化而失效。
• 而$('.btnDel').on('click', ...)执行时，DOM里还没有带.btnDel类的元素，所以这个绑定根本没有生效，自然不会触发。

解决方法 #

方法一：使用事件委托（推荐）

将事件绑定到一个始终存在的父元素（比如document，或更接近目标元素的容器），通过选择器过滤触发事件的元素。这种方式支持动态变化的元素，只要元素匹配选择器就能触发对应事件：

$('.btnEdit').on('click', function() {
  console.log("btnEdit was clicked");
  $(".btn").removeClass("btn").addClass("btnDel");
});

// 委托监听.btn元素的点击
$(document).on('click', '.btn', function() {
  console.log("btn was clicked");
});

// 委托监听.btnDel元素的点击
$(document).on('click', '.btnDel', function() {
  console.log("btnDel was clicked");
});

方法二：修改类后手动处理事件绑定

在修改元素类名后，先解绑原.btn的事件，再为新的.btnDel绑定事件：

$('.btnEdit').on('click', function() {
  console.log("btnEdit was clicked");
  const $btns = $(".btn");
  // 解绑原.btn的点击事件
  $btns.off('click');
  // 修改类名
  $btns.removeClass("btn").addClass("btnDel");
  // 为.btnDel绑定点击事件
  $btns.on('click', function() {
    console.log("btnDel was clicked");
  });
});

// 初始绑定.btn的点击事件
$('.btn').on('click', function() {
  console.log("btn was clicked");
});

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