My CODE

HTML:

<p id="console"></p>
<button>Click <span class="icon"></span>
</button>

JS:

$('.icon').click(function () {
    $('#console').html('Icon has been clicked');
    return false;
});

$('button').click(function () {
    $('#console').html('Button has been clicked');
});

CSS:

.icon {
    background-position: -96px 0;
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    line-height: 14px;
    vertical-align: text-top;
    background-image: url(".png"); 
    background-repeat: no-repeat;
}

Demo

Problem

I am able to click on .icon in Chrome , but not in Firefox. When I click on .icon, it clicks on whole button.

Question:

Isnt my code valid ? If my code is valid, whats the solution to this problem.

What I have tried

1. I have tried doing $('.icon').click() from console and it works perfectly in ff, so I guess the problem is that span is not clickable inside button.

2. e.preventDefault() and e.stopPropagation are not working either.

3. I've tried putting   inside span but its not working either.

My CODE

HTML:

<p id="console"></p>
<button>Click <span class="icon"></span>
</button>

JS:

$('.icon').click(function () {
    $('#console').html('Icon has been clicked');
    return false;
});

$('button').click(function () {
    $('#console').html('Button has been clicked');
});

CSS:

.icon {
    background-position: -96px 0;
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    line-height: 14px;
    vertical-align: text-top;
    background-image: url("http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings.png"); 
    background-repeat: no-repeat;
}

Demo

Problem

I am able to click on .icon in Chrome , but not in Firefox. When I click on .icon, it clicks on whole button.

Question:

Isnt my code valid ? If my code is valid, whats the solution to this problem.

What I have tried

1. I have tried doing $('.icon').click() from console and it works perfectly in ff, so I guess the problem is that span is not clickable inside button.

2. e.preventDefault() and e.stopPropagation are not working either.

3. I've tried putting   inside span but its not working either.

• javascript
• jquery
• css
• html

• Are you able to click on .icon and button separately ? I am using firefbox 18.0.1 for ubuntu 12.04 – Jashwant Commented Feb 4, 2013 at 15:30
• 3 button is clickable by default, you are not suposed to click on anything inside it, if this works on chrome, its not on purpose. Instead of button, use another tag like div, and style it(fake a button) – Toping Commented Feb 4, 2013 at 15:30
• 1 @JayBlanchard it shouldn't bubble if the "icon" event handler returns false though (even though I think it shouldn't work anyway) – Pointy Commented Feb 4, 2013 at 15:31
• 1 I can use div instead. But whats wrong here ? span is a valid child of button – Jashwant Commented Feb 4, 2013 at 15:33
• 1 @Jashwant it is valid html, but not supposed to do what you want. – Toping Commented Feb 4, 2013 at 15:33

3 Answers 3

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>

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!

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.