JQuery привязки нажмите событие на DIV

Question

У меня есть некоторые HTML, как это:

  <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> 

и следующий 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 { 
    ... 
    } 
    }); 

оба метода испытания, и они работали, но после того, как я сделал привязку на весь div (.vmail), когда я нажимаю на флажок ввода, событие, связанное с этим флажком, не работает, и событие для div запускается вместо него.

Я хочу, чтобы событие было ответственным за этот флажок, нажмите, чтобы стрелять, и нажмите клавишу div, чтобы отменить, если я нажму кнопку на флажке.

Answer 1

Возможно, вы захотите посмотреть на метод stopPropagation на события. Это предотвратит «пузырение» на родительские элементы.

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