FireFox Button child span and li not clickable or hoverable

css, firefox, javascript, jquery

Solution

The short answer to your question: Yes.

Clicking the children elements won't work because it's inside a button. A button is not tailored to be a container for child elements - only for text.

Try this out. You'll find that it would always tell you that you clicked the button.

<button type="button" onclick="alert('You clicked the button!');">
    <p onclick="alert('You clicked the p!');">Hello</p>
    <a href="#" onclick="alert('You clicked the a!');">Hi</a>
</button>

DEMO

Problem

I have an dialog that is loaded via ajax. Inside there are a series of buttons. I added children to these buttons that are the clickable elements. These are LI and SPAN elements. The hover event is a pseudo selector :hover on the children. There are click events bound to these children as well. This works fine on Chrome but FireFox does not work. Neither hover nor the click events are triggered. Is this simply getting blocked by the button?

Original source