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>
Nested file input doesn't work in Firefox
The reason for the difference in behaviour is most likely that the code is invalid.
See HTML 4: 17.4 The INPUT element: "Start tag: required, End tag: forbidden"
So, you can't nest an input tag inside another. Different browsers handle invalid markup differently, so they can for example ignore that one is inside the other and place them beside each other, or ignore the inner tag completely.
If you are curious, you can use FireBug to examine the DOM to find out what elements are created from the markup, but it's really moot as invalid markup won't work reliably anyway.
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): a
s, form
s, form "controls" (input
, select
, etc), and fieldset
s.
While you are correct in asserting that span
s (and div
s, 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>
Related Topics
HTML Email - Is Colspan Allowed
Nesting <A> Inside <Button> Doesn't Work in Firefox
Change Select List Option Background Colour on Hover in HTML
How to Apply Two CSS Classes to a Single Element
Space Between Two Rows in a Table
Why Does My "Oninvalid" Attribute Let the Pattern Fail
Valid to Use <A> (Anchor Tag) Without Href Attribute
What Is the Meaning of ? (Question Mark) in a Url String
What's the Difference Between "&Nbsp;" and " "
Preventing Firefox from Remembering the Input Value on Refresh with a Meta Tag
How to Include a Font .Ttf Using CSS
How to Make a Display:Flex Container Expand Horizontally with Its Wrapped Contents
Should Global CSS Styles Be Set on the HTML Element or the Body Element
What Does -Webkit-Transform: Translate3D(0,0,0); Exactly Do? Apply to Body
How to Add a "Search" Button in a Text Input Field