I've designed a div element to serve as a contact list, containing other divs within it. I'm attempting to set up a click handler on each list item (inner div) but the click event is not being triggered.
$(".contact").on("click", function() {
alert("clicked");
});.contacts {
position: absolute;
top: 10px;
left: 300px;
width: 100px;
height: 250px;
border-color: black;
border-style: solid;
z-index: 1;
overflow: scroll;
}
.contact {
position: relative;
width: 80%;
height: 20%;
border-style: solid;
border-color: red;
z-index: 100;
}<div id="contactList" class="contacts">
<div id="1" class="contact">one</div>
<div id="2" class="contact">two</div>
<div id="3" class="contact">three</div>
</div>When I assign a click handler to the parent DOM object, it works as expected. Is there something I'm overlooking?
EDIT:
It just occurred to me that I forgot to mention how children are added:
$(".contacts").append($("<div id='"+id+"' class=contact >"+d[contact].name+"</div>"));
Here, the variables "d" and "id" are populated from a successful server call.