JQuery绑定div上的click事件

时间:2010-12-13 14:58:56

标签: javascript jquery html

我有一些像这样的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点击。

1 个答案:

答案 0 :(得分:4)

您可能希望查看有关事件的stopPropagation方法。这将阻止它“冒泡”到父元素。

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