Edit Question - KnowledgeHub

Title Body

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 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 . e.preventDefault() and e.stopPropagation are not working either. I've tried putting &nbsp; inside span but its not working either.

Tags (comma-separated) Cancel