Javascript 事件处理程序不适用于所有元素

我试图找到一种方法，将事件处理程序分配给我动态创建的每个框。此时，用户可以单击“在上面添加”或“在下面添加”，无论单击何处，都会出现两行框

我也在尝试这样做，当用户点击一个特定的方块时，会弹出一个颜色选择器，可以改变这个特定方块的颜色

然而，出于某种原因，只有当用户单击前两行方块时，才会弹出颜色选择器。如果在当前集的下方或上方动态添加更多行，则单击正方形时不会发生任何事情

有人知道为什么会这样吗

到目前为止我所做/尝试的：

---

这可能无法解决所有问题，但如果删除

e.preventDefault（）从菜单中单击：

 $("body").on('click', ".repeat", function (e) {
        e.preventDefault();

它将允许您更改每个新创建部分的颜色。希望有帮助？
在第2行尝试以下内容：

$(document).on("click", ".container", doSomething);

您使用的是jQuery，使用jQuery的内置功能进行事件委派不是容易得多吗？其中有一节介绍委派事件，您可能会觉得很有启发性。@adeneo当我登录控制台时，我的程序确实检测到可以点击不同的方块，所以我不确定为什么它不能正常工作。我将事件监听器添加到父元素中，就像jquery一样。@adeneo感谢您的响应！您知道为什么colorPicker绑定到第一次单击的元素吗？您确定吗？我只是在下面添加了一个新的部分（删除该行之后），没有颜色选择器弹出响应的提示，但是当我添加一个新行时，没有任何提示？我用上面的代码替换了代码中的第1行和第2行，它适用于所有新行。您可以通过codepen链接吗？您知道为什么颜色选择器绑定到第一次单击的元素吗？我总是重置父元素。
$(document).on("click", ".container", doSomething);