I have created a div element which is supposed to be a contact list. It should contain other divs in it. 
What I'm trying to do, is attach a click handler on each list item (on each inner div). 
But the click handler is never triggered.

```js
$(".contact").on("click", function() {
  alert("clicked");
});
```

```css
.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;
}
```

```html
<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>
```

If I attach a click handler for the parent DOM object, it gets triggered. Am I missing something here?

EDIT: 

silly of me, i forgot to mention that children are added this way:

```
$(".contacts").append($("<div id='"+id+"' class=contact >"+d[contact].name+"</div>"));

```

where "d" and "id" variables come from a successful server call.