javascript - 使用 javascript onclick 调用时，未检测到使用 Jquery addClass 添加到元素的类名

Question

我有一个输入元素

<input type="submit" id="btn-submit-id" 
  class="btn btn-success btn-submit-employee employee-tag" value="Submit">

并使用指向其类名的 javascript onclick 调用 btn-submit-employee -

$(".btn-submit-employee").on("click", function(e){ e.preventDefault(); alert('submit'); });

单击提交按钮时，我将其值更改为 value="Update"，同时调用 addClass 和 removeClass 函数添加 btn-update-employee 作为其类名之一并删除 btn-submit-employee 类名。当我第二次点击按钮时，它应该调用函数

$(".btn-update-employee").on("click", function(e){ e.preventDefault(); alert('Update'); });

但它仍然调用指向类名 btn-submit-employee 的 javascript 函数，即使在我使用 removeClass 功能。这有什么问题？下面是我的完整代码。非常感谢。

HTML 元素:

<input type="submit" id="btn-submit-id" 
  class="btn btn-success btn-submit-employee employee-tag" value="Submit">

Javascript:

$(".btn-submit-employee").on("click", function(e){ 
  e.preventDefault(); 

  $("#btn-submit-id").val("Update");
  $(".btn-submit-employee").addClass("btn-update-employee");
  $(".btn-submit-employee").removeClass("btn-submit-employee");
  alert('submit'); 
 });

$(".btn-update-employee").on("click", function(e){ 
  e.preventDefault(); 
  alert('Update'); 
});

Answer 1

这样添加的事件处理程序只会在页面首次加载时附加。要按照您的预期工作，您需要将事件处理程序委托(delegate)给 DOM 中的更高元素 - 通常是 document 本身，但您也可以使用周围的元素(如“div”)

$(document).on("click",".btn-submit-employee", function(e){ 
  e.preventDefault(); 

  $("#btn-submit-id").val("Update");
  $(".btn-submit-employee").addClass("btn-update-employee");
  $(".btn-submit-employee").removeClass("btn-submit-employee");
  alert('submit'); 
 });

$(document).on("click", ".btn-update-employee",function(e){ 
  e.preventDefault(); 
  alert('Update'); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="submit" id="btn-submit-id" class="btn btn-success btn-submit-employee employee-tag" value="Submit">