In this fiddle 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.
don't you need to use .on for your dynamically created divs?
$("#game_board").on('click', 'div', function() {