AddClass in jQuery on runtime and select the new class

Question

我想在运行时（点击标签后）将 class 添加到 div 标签，并通过新的 select div 标签 class 之后的名字。

这是我的代码：

HTML

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

CSS

.black{
  color:black;
}

.green{
  color:green;
}

jQuery 应删除 class "black" 并添加 class "green"。单击 div 标签后，字体颜色变为绿色并出现 p 标签 - 因此，新的 class 已 added.jQuery

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

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

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

有人知道要更改什么吗？

谢谢

F到期

Answer 1

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

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

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

AddClass in jQuery on runtime and select the new class

AddClass in jQuery on runttime and select the new class

jquery

addclass

class

onclick

jquery-selectors