Question: In [this fiddle](http://jsfiddle.net/gnat79/fxmjbhdw/3/) I am trying to be able to click on the `<div>` element with the highest `z-index` value, but for some reason the click is always picking the container in the background `game_board`. 

I am trying to set it so that when I click on a grey tile, I add a new green `active` tile. When I click on the new active tile, I want to be able to change its attributes and style, but I can't seem to get that click to go through to the active tile.

I am really confused by why the `z-index` doesn't seem to work when I add a new `<div>`. The new `<div>` has the `active` class, which defaults to `z-index: 10` which *should* mean it is the front `<div>`... Checking in Chrome by inspecting, all the z-index values are as I am expecting, still it doesn't work as expected.

I would appreciate any and all constructive criticism of this example.

Answer: 
don't you need to use .on for your dynamically created divs? 

```
 $("#game_board").on('click', 'div', function() {

```

<http://jsfiddle.net/enf4s0za/1/>
You are adding a new element to the `game_board` but this `$("div").click(function()` only applicable for the element that created on page load, so if you want to work `click` method real time you have to use `on` method.

Try this: <http://jsfiddle.net/fxmjbhdw/31/>