I have two containers, one that isn't generated until the page has loaded. The one generated last (<div class=last></div>) should appear over the first one. Visually it does cover up the first one. However, I cannot get the ".last" to respond to a live() click event. It will respond to the first div, but not the last div (again, the div that visually appears in the foreground). This is driving me nuts, there are no other click events on the page. To be clear here's my page:
<body>
<div class="first">First div</div>
<script type="text/javascript">
// This works
$('body').append($('<div/>').addClass('last').text('last div'));
//This does not
$('.last').live('click', function(e) {
alert('hello');
});
</script>
</body>
If I replace ".last" with ".first" it works, I have no other click events so I don't see why propagation should stop. I even assigned z-index: -1 to last. This has to be incredibly simple, any ideas?
CSS for Last Div:
-moz-box-shadow:0 4px 10px 0 #8B8B8B;
background-color:white;
cursor:default;
margin:0 0 0 2px;
padding:4px 0;
position:absolute;
First div, no CSS.
Edit: My DOM structured is a bit more complex than the example above. I'm positive the div "last" is visible and on top. Here's the actual DOM structure of the project:
<div>
<button> (when button is pressed last is created)
<span>
<div>
<div class="last"></div>
</div>
</button>
</div>
<table>
<thead>
<tr>
<td><div class="first"></div></td>
</tr>
</thead>
</table>
I believe I figured it out and didn't realize it until I posted my entire tree. I feel so stupid. The "button" div was stopping propagation as it had a jquery-ui event attached to it. For whatever reason on Chrome and Firefox not render the change of state (ie, show the button as being pressed down). This is because the "last" div is not on the button and below it. However as far as events were concerned, it stopped at the button. IE8, strangely enough, will show the button being pushed down (the event triggering), which lead to realize this was the bug. I completely forgot that jQuery-UI was hooked onto the button and that could both be showing the div and preventing it from being shown. Moving the div outside the button solved the problem.
It would be really nice if jQuery had some sort of live log where you see the entire event bubble upwards.