Click event not recognized on higher z-index element

Question

I have a code snippet like this : (notice frame_bookmark has z-index 100)

<div id="select_bar">
  <div class="frame_bookmark" style="position:absolute;top:1px;left:695px;z-index:100;width:15px;height:15px;background:#df3367;border-radius:10px;">
  </div>
</div>

The alert box is shown when I have JavaScript like

$("#select_bar").click(function()
{
  alert('down');
});

But not shown when I have JavaScript like:

$(".frame_bookmark").click(function()
{
  alert('down');
});

Answer 1

If the code you posted is exactly your code, your missing a closing </div> which will definitely mess you up. It should be:

<div id="select_bar">
    <div class="frame_bookmark" style="position:absolute;top:1px;left:695px;z-index:100;width:15px;height:15px;background:#df3367;border-radius:10px;"></div>
</div>

Answer 2

检查这个http://jsfiddle.net/您的代码很正常）

Answer 3

form my understanding when you call a ID in jquery just like JavaScript it defaults at eq(0).

but when using the attributes class / name you want to specify your indexed numeric for

example

$(".frame_bookmark:eq(0)") / $(".frame_bookmark").eq(0)

and or use the .each function