jQuery ~ Two click events overlayed?

Question

I have a container element say

<div id="myContainer">
  <form action="" method="post">
   Radio: <input type="radio" name="myRadio" id="myRadio" value="1" />
  </form>
</div>

So if I assign a click event to the $('#myContainer') and also a click event to $('#myRadio') is there a way to get them both to fire? Currently, because there is a click event "above" the form element, which has a return false to stop the page jumping, I cannot click the radio button.

Is there a way to tackle this? Or do I need to be more specific in my selectors? Or even $('#myContainer:not("#myRadio")') ? (is that even valid?)

Answer 1

To stop the page jumping use event.preventDefault() instead of return false; which is currently stopping the event dead in its tracks.

The natural behavior is for the event to bubble, so all you need to do to get both handlers firing is not interfering with the bubble via return false :)

Answer 2

You can do the following!

$('#myContainer, #myRadio').click(function(event){

    event.stopPropagation(); //This will stop the bubble so it only fires once per element
    switch(event.srcElement)
    {
        case 'HTMLFormElement':
            //The Div / Form
        break;
        case 'HTMLInputElement':
            //The input itself
        break;   
    }
    return false;
})​

Example Here, You will need to add alerts