.click() Child Radio Triggers: Uncaught RangeError: Maximum call stack size exceeded
<p>I have looked at other questions regarding this console error. None of which seem to hold the answer to my dilemma. I mainly see issues with APIs co-existing, and other more complex situations that mine...</p>

<p>The script I'm trying to write simply clicks a child input (radio) when the parent is clicked. this is easily the tiniest function I have written in a long time, yet I'm vexed. Why is such a small script not working? I've even made a new (simple) html file with just the html for these two buttons, and just the jquery to make them do what I want. I tried changing the names of the inputs to differing names. No dice. It seems as though jQuery is being thrown into an infinite loop.</p>

<p>Has anyone encountered this issue before? I have seen a couple reported bugs on jQuery's site, but they were people using pseudo-selectors improperly (and other bogus "bugs"). I can't figure this out! Thanks in advance for any guidance here...</p>

<p><em><strong>UPDATE: Solution</em></strong>
Use the <code>&lt;label&gt;</code> as the button. Most browsers utilize the label as a "click the accompanying input". So NO JQUERY REQUIRED in this case. Thanks everybody who contributed below!!! I wanted to mark a few as the answer. But couldn't...</p>

<p><strong>jQuery Version Used</strong></p>

<p>jQuery 1.9.0</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="full-width"&gt;
    &lt;div class="toggle"&gt;
        &lt;div class="button"&gt;
            &lt;input name="ship-to" type="radio" checked="checked" value="billing"&gt;
            &lt;label for="ship-to"&gt;Ship to my billing address&lt;/label&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="toggle"&gt;
        &lt;div class="button"&gt;
            &lt;input name="ship-to" type="radio" value="different"&gt;
            &lt;label for="ship-to"&gt;Ship to different address&lt;/label&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>jQuery</strong></p>

<pre><code>$(document).ready(function(){
    /* Buttons */
    $('.button').click(function(){
        var $radio = $(this).children('input');
        $radio.click();
    });
});
</code></pre>

<p><strong>Console Error</strong></p>

<pre><code>Uncaught RangeError: Maximum call stack size exceeded
a
a.matches
st.extend.filter
st.fn.(anonymous function)
(anonymous function)
st.event.dispatch
y.handle
st.event.trigger
(anonymous function)
st.extend.each
st.fn.st.each
st.fn.extend.trigger
st.fn.(anonymous function)
(anonymous function)
st.event.dispatch
y.handle
st.event.trigger
(anonymous function)
st.extend.each
st.fn.st.each
</code></pre>

<p>... This goes on for quite sometime.</p>
