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 🙂