Span Inside Button, Is Not Clickable in Firefox

span inside button, is not clickable in Firefox

Refer to the spec, most notably the forbidden contents (in the SGML definition; for assistance reading that, look here): as, forms, form "controls" (input, select, etc), and fieldsets.

While you are correct in asserting that spans (and divs, etc) are legal contents of a button element, the illegal elements are all to do with having button content that does anything other than layout / styling.

I don't see anything in the spec precluding what you're trying to do, but I do see a lot discouraging it, and would be unsurprised if various browsers also "discouraged" that by not supporting it.

Which is to say: find another way to do what you want if you want to have cross-browser support. I don't understand what you're actually trying to do, so I don't think its possible to propose alternatives. I get that you want to respond differently to clicking on the button vs the icon -- but that's a (good, btw) demonstration of what you don't want to happen, not an explanation of an actual problem you want to solve.

One way might be to not use a button, and instead use another span or a div:

<p id="console"></p>
<div class="button_replace">Click <span class="icon"></span></div>
<script>
  $('.icon').click(function () {
    $('#console').html('Icon has been clicked');
    return false;
  });
  $('.button_replace').click(function () {
    $('#console').html('Button has been clicked');
  });
</script>

Missing click event for span inside button element on firefox

As far as i known clicking the children elements won't work because it is nested inside a button. A button is not container for child elements - only for text.

If you try like below it always tell that you clicked the button.

<button type="button" onclick="alert('You clicked the button!');">

   inside a button <span onClick="alert('clicked span');">**Not working**</span>

</button>

FireFox Button child span and li not clickable or hoverable

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

Clickable div inside a button doesn't work on firefox

In Firefox, the button itself steals events like mouse events and click of the child element. This means things inside buttons cannot be clicked. It is not considered a bug because it works exactly as designed.

Source

Please visit this also

Based on the above links the solution for Firefox is to change the button to some other element like div and manage the functionality and design accordingly.

Element inside button does not fire click event in Firefox

This is by definition, see 4.10.8 The button element

Content model:
Phrasing content, but there must be no interactive content descendant.

Link inside a button not working in Firefox

This doesn't work because it is not allowed by HTML5:

Content model: Phrasing content, but there must be no interactive
content descendant.

Interactive content means any of the following elements:

a audio (if the controls attribute is present) button details embed
iframe img (if the usemap attribute is present) input (if the type
attribute is not in the hidden state) keygen label menu (if the type
attribute is in the toolbar state) object (if the usemap attribute is
present) select textarea video (if the controls attribute is present)

If it does work in some browsers it's just because they're trying to
play nice with malformed markup and provide some sort of meaningful result.

In other words: rewrite your HTML, it's a mess. If you want the links to look like they're in a button, put them in a div element and style that to look like one, instead of abusing semantically wrong elements for it.

span inside a button tag not clickable using selenium webdriver?

You need one of the following xpaths:

First choice:

//span[contains(text(), 'Add Course')]

These two, only if there are always 2 spans and the second span is always Add Course:

(//button[@class='btn btn-green']/span)[2]
//button[@class='btn btn-green']/span[2]

Slowest option as the entire document is scanned. Add Course can only occur once on the page:

//*[contains(text(), 'Add Course')]

Nesting a inside button doesn't work in Firefox

To make it work in all browser, Firefox too you have to change it to

<a href="#"><button class="btn"></button></a>

or as suggested by Billy Moat in case of bootstrap there was no need of <button> you could just do

<a href="#" class="btn">GO</a>

File input field inside button doesn't work in Firefox

Input elements are not allowed inside button elements in HTML.

Write valid HTML instead of depending on consistent error recovery.

Make the button and input sibling elements and then position them within a container (such as a div).

---

Related Topics