"too Much Recursion" Error In Jquery 1.3.2

I am trying to make a form with some dynamic behavior. Specifically, I have my inputs in divs, and I would like to make it so when the user clicks anywhere in the div, the input is

Solution 1:

$(function() {
    $(".question div").click(function() {
        var radio = $(this).children("input")[0];
        radio.checked = !radio.checked;
    });
});

Solution 2:

ya, click event bubbles up… so when you raise $(this).children("input").click(), you are raising $(".question div").click() again, and so on.

Solution 3:

Why do you need to do this if you are using <label for=""> already? Clicking on the label should activate the radio control anyway.

[Edit:] Following up on your comment, you can do it this way:

Make the label display as a block element, apply all styles you have used for the div wrapping the field.

.questionlabel { display:block }

and then use this layout. You can get rid if the divs too.

<label><inputtype="radio">Coke</label><label><inputtype="radio">Pepsi</label>

Solution 4:

Only fire click() when the event's target is the div, ie

$(function() {
    $(".question div").click(function(event) {
        if($(event.target).is('div'))
            $(this).children("input").click();
    });
});

Solution 5:

I had the same problem when I was going to make my div submit it's child input:submit. This will solve the problem:

$(function() {
    $(".question div").click(function() {
        $(this).children("input").click(function(event){
            event.stopPropagation();
        });
        $(this).children("input").trigger("click");
    });});