jQuery〜两次单击事件重叠了吗？

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