11

I have a <button> element inside of which I have 2 <span> elements. I have 2 attached jquery click event handlers for each of the span elements so I can do whatever I like for each click. Here's a quick look of the basic code:

HTML

<button>
    <span>Text1</span>
    <span>Text2</span>
</button>

Javascript

$(function() {
    $('button').bind('click', function() {
        console.log('button clicked');
    });
    $('button > span:eq(0)').bind('click', function() {
        console.log('text1 span clicked');
    });
    $('button > span:eq(1)').bind('click', function() {
        console.log('text2 span clicked');
    });
});

This is all working fine in Chrome and the click event is captured in the correct order: first on any of the span elements and then the event bubbles up to the parent button element.

The problem is that in Firefox the click event does not fire for any of the span elements, just the button event handler logs the event as being fired.

Here's a fiddle so you can see what I mean: http://jsfiddle.net/spider/RGL7a/2/

Thanks

Bogdan
  • 43,166
  • 12
  • 128
  • 129
  • I'm guessing this was never resolved? – Shane Feb 28 '14 at 23:36
  • @Shane Unfortunately no and from what I've seen it might never be, as this still doesn't work in the latest Firefox version. Frameworks like Bootstrap do this by using [two separate buttons](http://getbootstrap.com/components/#btn-dropdowns-split). And other frameworks like Foundation or YUI just use other markup altogether to simulate this **split button** functionality ([Foundation Example](http://foundation.zurb.com/docs/components/split_buttons.html) and [YUI Example](http://yuilibrary.com/yui/docs/node-menunav/node-menunav-4.html)). – Bogdan Mar 01 '14 at 11:05
  • I usually use Boostrap for this kind of functionality and where that's not an option, I use their strategy as it seems the best in terms of markup semantic. – Bogdan Mar 01 '14 at 11:08
  • I reluctantly switched to div.button. These buttons needed to be nested inside each other. I could have just positioned the button on top, but I have a module structure that passes view objects around and expects one parent per module, this parent was a button, etc. Corner cases! peh – Shane Mar 01 '14 at 13:09

2 Answers2

3

A simple solution would be to use a <div> element instead of a button element. Put the common code you want fired into a function and then execute the function when either of the spans are clicked as well as the span's unique code. If you wanted to be more 508 compliant you could make the spans into <a> tags (or even <button> tags.

Obviously, that doesn't explain FF event handling but it might be a quicker way to go.

Ben L
  • 2,491
  • 1
  • 16
  • 7
  • Thank you Ben for the suggestion. Yes, what you are saying is an alternative solution to the problem, which I am aware of and works. I would still preffer (if possible) to use `button` instead of `div` as the parent element, because it seems more readable and semantically correct to have a button with 2 actions (one primary and one secondary), than having a div with 2 buttons inside. Especially since my css rules style it as any of my regular (single action) buttons just split by a vertical separator. If I won't find any solution I'll have to make this compromise and go with divs. Thanks again – Bogdan Nov 19 '11 at 12:44
-1

Try changing

    <button> to <button type="button">

This should solve your issue off the bat. The reason its not working is because its following through with the default action of a button, which is to submit. i.e. BUTTON would need return false in the javascript for it to read your click. Just as if you were to try and click on a link without setting its default action to return false.

If you add the following line of jQuery code to your js, this should also resolve your issue. Make sure to add the code before your button > span click bind.

     <script type="text/javascript">
        $(function() {
            $('button').click(function(){
                 return false
            });
        });
     </script>

Hope this helps.

-D

Downpour046
  • 1,661
  • 9
  • 14
  • Thank you for the suggestions, but neither of them solves the problem (I tried `type="button"` myself before I posted the question, but didn't incorporate it into my example because it made no difference). The issue seems to be that on Firefox, the click event is only captured by the `button` element and not by any child elements. – Bogdan Nov 19 '11 at 12:27