jQuery:如何将事件委托与添加到嵌套div的类一起使用？

我正在尝试用嵌套的div和基本的jQuery编写这首诗.我的想法是先从类的一个DIV .active拥有display: block和所有其他div第一的S为孩子div与display: none.现在,当您单击第一个时div,它会.active从自身中删除该类(添加到.static现在只是更改颜色的类本身)并添加.active到其子项.实际上,孩子div变得可见.然后你点击那个孩子来揭示它的孩子,依此类推,直到诗的结尾:

$(".active").click(function() {
  $(this).removeClass("active").addClass("static");
  $(this).children("div").addClass("active")
});

.active加载脚本时,只有第一个div的类存在于DOM中.点击在第一个div上工作,在下一个div上被忽略,如同这个小提琴:https: //jsfiddle.net/4ygfrtgb/1/

我试过像这样的事件委托:

$("div").on("click", ".active", function() {
  $(this).removeClass("active").addClass("static");
  $(this).children("div").addClass("active");
});

然而,即便是第一个也没有div对点击做出反应.我知道委托对元素的子元素起作用,而我试图调用同一元素的类.

那么有没有办法通过在加载DOM之后添加的类来定位元素？

非常感谢你.