span inside button, is not clickable in Firefox

Question

My CODE

---

HTML:

Click 

        

Answer 1

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>

Answer 2

If you're here, maybe this solution will work for you, even though it's not really related directly to the question.

If you've applied a

• $("button").click() listener, and
• your button contains a <span> or any other <tag>, and
• your .click callback function refers to $(this) (or even this)

Then, if you click on the button, this will likely be the top-most tag you CLICKED ON.

This will often, such as in my case, misattribute the caller, causing script errors.

Hope it helps someone out there!

Answer 3

Using previous answers, I found that just changing my to fixed the problem and allowed me to have content inside the button. The styling is virtually the same, I just left the same bootstrap button classes and element in there and it behaves just the same as before. The tabindex is there because I'm using a dropdown list inside the button so that the button (now div) can be focused and have (blur) or (focusout) event in Angular.