title: jQuery click event handler is called twice for a checkbox
body: <p>I have a problem with the following code in an ASPX page:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      $('.test').click(function() {
          alert("click")
      })
  });
  &lt;/script&gt;
  
  &lt;asp:CheckBox runat="server" Text="Checkbox XYZ" CssClass="test" ID="cb1" /&gt;
  </code></pre>
  
  <p>In the browser (FF3.5 / IE8) I have the following problem:</p>
  
  <ul>
  <li>if I click the checkbox (the small square), it works as expected</li>
  <li>if I click the checkbox's text ("Checkbox XYZ"), then the click event is fired twice, and the alert is shown twice.</li>
  </ul>
  
  <p>I guess this has to do with the way the checkbox is rendered to HTML, which is like this:</p>
  
  <pre><code>&lt;span class="test"&gt;
   &lt;input id="ctl00_c1_cb1" type="checkbox" name="ctl00$c1$cb1" checked="checked"/&gt;
   &lt;label for="ctl00_c1_cb1"&gt;Checkbox XYZ&lt;/label&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>How do I correctly setup the click event handler to prevent it from being called twice?</p>