Question

I have some html like this:

          <div class="vmail vmail-bar normal-vmail-bar" id="pm_<?php echo $pm->to_id; ?>">
                <div class="checkbox"><input type="checkbox" class="checkbox" /></div>
                <div class="vmail-from">
                    <?php echo $pm->Prenume." ".$pm->Nume; ?>
                </div>
                <div class="vmail-content-title"><?php echo $pm->subject; ?> </div>

            </div>  

and the following Jquery:

 // 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 {
     ...
    }
  });  

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.

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.

Answer 1

You might want to look at the stopPropagation method on events. This will prevent it from ‘bubbling’ to parent elements.

container.find(':checkbox').bind('click', function(ev) {
    ev.stopPropagation();
    if($(this).is(':checked')) {
     ...
    } else {
     ...
    }
});