title: Why onclick is being triggered twice?
body: <p>This is a small piece of code on which I have been working:</p>
  
  <p>All I want is to add an <code>active</code> class to label on click of the same element and leave the default behavior same.</p>
  
  <p>I don't know why is the click event being triggered twice ??</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('label.add-to-favourite').click(function(e){
    alert("here");
    $(this).toggleClass('active');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.add-to-favourite span{
      cursor: pointer;
      color: #d2d6de;
  }
  
  
  .add-to-favourite:hover span, .add-to-favourite.active span {
      color: #CB3D3D;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/&gt;
  
  &lt;ul&gt;
    &lt;li&gt;
      &lt;label class="add-to-favourite"&gt;
        &lt;span class="fa-stack fa-lg"&gt;
            &lt;i class="fa fa-circle fa-stack-2x"&gt;&lt;/i&gt;
            &lt;i class="fa fa-heart fa-stack-1x fa-inverse"  title="Add to Favourites" data-toggle="tooltip"&gt;&lt;/i&gt;
        &lt;/span&gt;
        &lt;input type="checkbox" name="favourites[]" value="1"&gt;
      &lt;/label&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;label class="add-to-favourite"&gt;
        &lt;span class="fa-stack fa-lg"&gt;
            &lt;i class="fa fa-circle fa-stack-2x"&gt;&lt;/i&gt;
            &lt;i class="fa fa-heart fa-stack-1x fa-inverse"  title="Add to Favourites" data-toggle="tooltip"&gt;&lt;/i&gt;
        &lt;/span&gt;
        &lt;input type="checkbox" name="favourites[]" value="2"&gt;
      &lt;/label&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>