title: JQuery bind click event on div
body: <p>I have some html like this:</p>
  
  <pre><code>          &lt;div class="vmail vmail-bar normal-vmail-bar" id="pm_&lt;?php echo $pm-&gt;to_id; ?&gt;"&gt;
                  &lt;div class="checkbox"&gt;&lt;input type="checkbox" class="checkbox" /&gt;&lt;/div&gt;
                  &lt;div class="vmail-from"&gt;
                      &lt;?php echo $pm-&gt;Prenume." ".$pm-&gt;Nume; ?&gt;
                  &lt;/div&gt;
                  &lt;div class="vmail-content-title"&gt;&lt;?php echo $pm-&gt;subject; ?&gt; &lt;/div&gt;
  
              &lt;/div&gt;  
  </code></pre>
  
  <p>and the following Jquery:</p>
  
  <pre><code> // Read message - bind click on entire div ( the div includes the checkbox)
    container.find('.vmail').bind('click', function() {
          var id = $(this).attr('id').replace("pm_","");
          getPM(id);
    });  
  
  
  // bind click on checkbox
    container.find(':checkbox').bind('click', function() {
      if($(this).is(':checked')) {
       ...
      } else {
       ...
      }
    });  
  </code></pre>
  
  <p>both methods are tested and they worked, but after I did the bind on entire div (.vmail) , when I click on the input checkbox the event bined to the checkbox does not work and the event for the div is fired instead.</p>
  
  <p>I want the event responsible for the checkbox click  to fire and the div click to be canceled if I press click on the checkbox.</p>