Nesting <A> Inside <Button> Doesn't Work in Firefox

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>

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.

Can I nest button inside another button?

It is not valid to put a <button> inside a <button> element.

In the W3C recomendation for the button element you can read:

Content model:

Phrasing content, but there must be no interactive content descendant.

[source: w3.org (emphasis mine)]

Interactive content includes:

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

Click on checkbox inside a button element - Firefox issue

It seems Firefox and Chrome handle button events dispatching slightly differently. The way Chrome handles the click event in that case is that it propagates the event from Window through all the descendants until the input is reached- this is the capture phase, then once it reaches input, it bubbles up to Window passing again through all descendants. And it handles events depending on the different listeners that have been called in both phase.
In your case, since the default for the trigger phase is the bubble phase, the click goes through to the input, then you call stopPropagation, so it doesn't bubble up, and your click on the button isn't triggered. If you set your listener to work with capture phase, you'll see that the button is triggered even if ou have stopPropagation on your input. See here: https://jsfiddle.net/evxz483h/2/

What Firefox seems to do is to simply bubble up when it reaches the button instead of going down to the input. So the click never goes beneath button. Note that this seems to fit with specs of input element, that shouldn't be a descendant of a button:

The interactive element input must not appear as a descendant of the
button element.

See here: http://www.w3.org/TR/html-markup/input.button.html

So I guess this behavior is normal, or at least expected. Chrome has a nice way of handling it making it a bit more flexible, but maybe in some other case Firefox way might be better also.

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.

php/javascript Button in button doesn't work in firefox

That is because it is not valid: it is not allowed to nest interactive content (such as buttons) within a button. This means that your big button must not be a button element.

Try making your big button a span element / div element with display: inline-block; to simulate a similar effect. Of course, you might also want to add some custom logic to make it feel a button (hover / focus / tabindex et cetera), but that depends on your needs.

See also this answer for an overview what is not allowed to be nested within a button: Can I nest button inside another button?

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>

<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>