Question

Using jQuery, I have attached a “click” event handler to some “li” HTML elements.

The problem is: when I click the “li” element, the event does not fire.

“How?” – will you ask… so, see it by yourself in this simple jsFiddle

Consider:

• I have tested on Firefox 14.0.1 and Chrome 16.0.912.77 in my Ubuntu system.
• I have stripped a lot of stuff from CSS, HTML and JS of my original code while “hunting” the cause.
• You can click in the form label elements to see the event handler function working. But try to click in the li elements… does not work!
• If you just remove the float: left style from the “li” element, or the position: relative style from the “form”, then the problem disappears!

So, I am not exactly asking how to circumvent or workaround the problem, I am asking why the “click” event does not fire. Is this a bug? A bug from what? Browser? jQuery? CSS? It simply does not make sense to me, and I will love to see an explanation!

Thanks.

Answer 1

Because the li‘s do float and the form has a position:relative, the form lies above the li‘s, therefore you can still click “Image”

BTW.:
If you are using Firebug or Webdeveloper tools you can detect that.