jQuery切换按钮class后点击事件未触发对应绑定函数的问题

这是个很常见的动态元素事件处理坑，我给你一步步理清楚：

问题根源 #

你遇到的问题核心在于jQuery直接绑定事件的机制：

• 当页面加载时执行$(".btn-submit-employee").on("click", ...)，jQuery会找到当时DOM中所有带.btn-submit-employee类的元素，直接把点击事件绑定到这个元素本身。哪怕之后你修改了元素的类名，这个已经绑定的事件并不会自动消失——类名只是元素的属性，和已经绑定的事件没关系。
• 而$(".btn-update-employee").on("click", ...)在页面加载时执行，这时候DOM里根本没有带这个类的元素，所以这段代码等于白写，没有任何元素被绑定上这个点击事件。

所以第二次点击时，按钮身上依然带着最初绑定的submit事件，自然会触发它，而update事件根本没绑定到按钮上，也就不会生效。

两种可行的解决方法 #

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

事件委托是处理动态元素事件的最优解，原理是把事件绑定到一个静态存在的父元素（比如document，或者按钮的直接父容器）上，利用事件冒泡的特性，在事件触发时判断目标元素的类名。这样不管元素的类名怎么动态变化，都能正确匹配：

// 绑定到document上，监听.btn-submit-employee和.btn-update-employee的点击
$(document).on("click", ".btn-submit-employee, .btn-update-employee", function(e) {
  e.preventDefault();
  const $btn = $(this);
  
  if ($btn.hasClass("btn-submit-employee")) {
    // 处理Submit状态的逻辑
    $btn.val("Update")
        .addClass("btn-update-employee")
        .removeClass("btn-submit-employee");
    alert('submit');
  } else {
    // 处理Update状态的逻辑
    alert('Update');
  }
});

方法二：手动解绑+重新绑定 #

如果你的逻辑比较独立，也可以在修改按钮状态的同时，手动解绑原有的点击事件，再绑定新的事件：

$(".btn-submit-employee").on("click", function(e) {
  e.preventDefault();
  const $btn = $("#btn-submit-id");
  
  // 修改按钮状态
  $btn.val("Update")
      .addClass("btn-update-employee")
      .removeClass("btn-submit-employee");
  alert('submit');
  
  // 解绑原有的submit点击事件，绑定update的点击事件
  $btn.off("click")
      .on("click", function(e) {
        e.preventDefault();
        alert('Update');
      });
});

总结 #

优先选择事件委托的方式，因为它不需要手动管理事件的绑定与解绑逻辑，不管元素后续怎么动态修改（比如类名变化、元素删除重建），都能稳定工作，代码也更简洁易维护。

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