How can I prevent jquery from selecting a parent when I click on one of the children in that parent?

Question

Hi all, ok quick scenario:

html:

<span class="answer">blah<input type="radio" value="1"></span>

jquery:

$("span.answer").click(
function() {
check = $("input", this);
check.attr('checked', check.attr('checked') === true ? false : true);
);

Ok so this will check/uncheck the child radio input inside the selected span when I click inside it.

The problem I have is that I don't want to run this event when I actually click on the radio button itself (obviously because jquery will see the radio button as checked and uncheck - in effect the exact opposite of what should happen usually). Something along the lines of this:

$("span.answer:not(span input)").click

This of course doesn't work. Any ideas? Thanks in advance!

Leo

Answer 1

$("span.answer input").click(function(evt)
{
    evt.stopPropagation();
});

Will prevent the click event from bubbling up (and triggering the handler on "span.answer".)