Click event not firing. Why?

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

I have created a fiddle for you please have a look at itclick action working fine on all elements

Answer 2

The reason why click function is not working is li element are not placed inside form

Answer 3

If you inspect your DOM with firebug or something similar you will notice your form is floating over the first elements of your ul, therfore it works on "image" because it is not hidden by your form. Try to empty your css code in jsFiddle and everything will be working as intended.

Answer 4

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.