title: How to stop event bubbling in jquery?
body: <p>I'm using some <code>JQ</code> stuff on <code>check box</code>, even if the parent <code>div</code> is clicked. I am toggling the value of <code>check box</code>. Clicking on div is working perfectly but when you click on checkbox the function is called twice. Is there any way to solve this problem? following is my code(<a href="http://jsfiddle.net/vKNYy/1/" rel="nofollow">Fiddle</a>)
  HTML:</p>
  
  <pre><code>&lt;div class="check-unit"&gt;
      &lt;input type="checkbox" class="check" /&gt;
      &lt;p class="brandList"&gt;Model&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JQ:</p>
  
  <pre><code>$('.check').on('change',function(e){
      e.stopImmediatePropagation();
      if($(this).is(':checked')){
          console.log("checked");
      }else{
          console.log("unchecked");
      }
  });
  
  $('.check-unit').on('click',function(e){
      var checkbox = $(this).children('.check'),
      chhhk= checkbox.attr('checked') ? false : true;
      checkbox.attr('checked',chhhk);
      $(this).children('.check').change();
  });
  </code></pre>
  
  <p>I've seen <code>eventbubbling</code> problem on <code>stackoverflow</code>, but still confused how to do this. <a href="http://jsfiddle.net/vKNYy/1/" rel="nofollow">FIDDLE</a></p>