Strange behaviour of toggleClass with label element
<p>Earlier today I answered <a href="http://stackoverflow.com/questions/8385765/basic-jquery-not-working-properly-sanity-check-please/">this question</a>. The question is about toggling a class on a <code>label</code> element with jQuery. Consider the following HTML:</p>

<pre><code>&lt;label id="test"&gt;Test &lt;input type="checkbox"&gt;&lt;/label&gt;
</code></pre>

<p>And the following jQuery:</p>

<pre><code>$("#test").click(function() {
    $(this).toggleClass("testClass");
});
</code></pre>

<p>When I click on the <code>label</code> I would expect the <code>testClass</code> class to be applied to that element (as it doesn't have that class when the page loads). However, nothing happens. See it for yourself <a href="http://jsfiddle.net/interdream/CBPat/5/" rel="nofollow">here</a>. I haven't tried it in IE, but it doesn't work correctly in Chrome or Firefox. I believe it will work in IE from the question linked to previously.</p>

<p>Stepping through the <a href="https://github.com/jquery/jquery/blob/1.7rc2/src/attributes.js#L109" rel="nofollow"><code>toggleClass</code> method in the jQuery source</a>, what seems to happen is the class gets added and removed again straight away.</p>

<p>If you move the <code>input</code> element outside  of the <code>label</code>, the class is added as expected:</p>

<pre><code>&lt;label id="test" for="cb"&gt;Test&lt;/label&gt;
&lt;input type="checkbox" id="cb"&gt;
</code></pre>

<p>You can see that one in action <a href="http://jsfiddle.net/interdream/CBPat/4/" rel="nofollow">here</a>. So, my question is why does the first example not appear to add the class on the first click? Am I missing something blatantly obvious?</p>
