title: Strange behaviour of toggleClass with label element
body: <p>Earlier today I answered <a href="https://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 noreferrer">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 noreferrer"><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 noreferrer">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>