在运行时在 jQuery 中添加类并选择新类

Question

我想在运行时将一个类添加到 div 标签中（点击标签后），然后通过新的类名选择 div 标签。

这是我的代码：

HTML

<div class="black" id="" style="">
  black
</div>

CSS

.black{
  color:black;
}

.green{
  color:green;
}

jQuery 应该删除类“black”并添加类“green”。单击 div 标签后，字体颜色变为绿色并出现一个 p 标签 - 因此，添加了新类。jQuery

$(".black").on("click",function(){
  $(this).removeClass("black");
  $(this).addClass("green");
  $(this).append("<p>Green</p>");
});

$(".green").on("click",function(){
  alert("green");
});

现在第二个 jQuery 函数会在单击 div 标签时触发寻找新添加的绿色类，但这不会发生。 没有显示函数 2 的警报，而是添加了一个新的 p 标签（在函数 1 之后）。

有人知道要改变什么吗？

谢谢

到期

Answer 1

第二个没有触发的原因是，当您设置事件处理程序时，没有类green 的元素。要解决此问题，请将您的第二个处理程序更改为：

$("body").on("click", ".green", function(){
    alert("green");
});

这会将处理程序添加到主体，但仅当事件目标具有类 green 时才会触发它，这实际上是您想要的。