I have an ordered list with dynamically loaded li elements. Each of these li contains a div. By clicking on this div, the li containing it should be deleted. I have given these divs a height and width of 24px.
The li look like this:
<li id="parent">Some text <div id="child"></div></li>
These are appended to the ol like this:
$('#id_of_ol').append('<li id="parent">Some text <div id="child"></div></li>');
Here is the jquery code that I have tried:
$('#child').on('click', function () {
alert("clicked");
});
Of course, this alert is just there to check whether it's working, I will replace that with remove() later.
However, this doesn't work. On clicking, nothing whatsoever happens. What's the problem here?