单击不为子元素触发

Question

演示http://jsfiddle.net/tsxb8/

$('.parent').on('click', function() {
   alert(1); 
});
$('.child').on('click', function() {
   alert(2); 
});

当单击父元素时,我需要启动一些附加到子元素的代码.

正如我所看到的,当用户点击父母区域(深灰色,警报= 1)时,不会触发孩子点击处理程序,这不是子区域的一部分(浅灰色,警报= 2).

我该如何解决？

Answer 1

在父处理程序中显式触发对子项的单击:

$('.parent').click(function() {
    alert(1);
    $(this).find('.child').click();
});

$('.child').click(function(e) {
    e.stopPropagation(); // Prevent bubbling to parent, to avoid loop
    alert(2);
});

DEMO