title: Why are two click events registered in this html/css/jquery
body: <p>I am trying to style a checkbox list. I've added my styles and they appear correctly when rendered. I want to add a class when the label for the checkbox is clicked. This is my markup and <a href="http://jsfiddle.net/fdm1pmj2/1/" rel="nofollow noreferrer">here is the same in a jsfiddle</a>. You can see from my fiddle that two click events are registered with just one click. Why?</p>
  <p>html:</p>
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;label for=&quot;test_0&quot; class=&quot;&quot;&gt;
              &lt;input id=&quot;test_0&quot; name=&quot;offering_cycle&quot; type=&quot;checkbox&quot; value=&quot;1&quot;&gt; Fall
          &lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;label for=&quot;test_1&quot; class=&quot;&quot;&gt;
              &lt;input id=&quot;test_1&quot; name=&quot;offering_cycle&quot; type=&quot;checkbox&quot; value=&quot;2&quot;&gt; Spring
          &lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;label for=&quot;test_2&quot; class=&quot;&quot;&gt;
              &lt;input id=&quot;test_2&quot; name=&quot;offering_cycle&quot; type=&quot;checkbox&quot; value=&quot;3&quot;&gt; Summer
          &lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;label for=&quot;test_3&quot; class=&quot;&quot;&gt;
              &lt;input id=&quot;test_3&quot; name=&quot;offering_cycle&quot; type=&quot;checkbox&quot; value=&quot;4&quot;&gt; Other
          &lt;/label&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>ul {
      list-style-type:none;
  }
  label {
      position:relative;
      display:inline-block;
      padding-left:27px;
      height:25px;
  }
  label:before {
      display:block;
      position:absolute;
      top:-2px;
      margin-left:-28px;
      width:18px;
      height:18px;
      background-color:#fff;
      border-radius:5px;
      border:1px solid #ccc;
      text-align: center;
      color:#fff;
      font-size:18px;
      content:'a';
  }
  input {
      width:1px;
      height:1px;
      border:0;
      opacity:0;
      float:right;
  }
  </code></pre>
  <p>jQuery:</p>
  <pre><code>$('label[for*=test_]').on('click',function(){
      $(this).toggleClass('testing');
  });
  </code></pre>