在动态加载的<li>元素中单击div无效

Question

我有一个带有动态加载的li元素的有序列表。每个li都包含一个div。通过单击此div，应删除包含它的li。我给这些div设置了24px的高度和宽度。

李的样子：

<li id="parent">Some text <div id="child"></div></li>

这些是像这样附加到ol的：

$('#id_of_ol').append('<li id="parent">Some text <div id="child"></div></li>');

这是我尝试过的jquery代码：

$('#child').on('click', function () {
    alert("clicked");
});

当然，此警报只是用来检查其是否正常工作，我稍后将用remove（）替换。

但是，这不起作用。单击时，什么也没有发生。这是什么问题？