Click event not bubbling when image clicked

Click event not bubbling when image clicked

I have the following markup:
<ul>
<li class="tgt"><img src="http://placehold.it/48x48" width="48px"
height="48px"></li>
<li class="tgt"><img src="http://placehold.it/48x48" width="48px"
height="48px"></li>
<li class="tgt"><img src="http://placehold.it/48x48" width="48px"
height="48px"></li>
</ul>
Code from the fiddle:
$('.tgt').on('click', function (e) {
if ($(e.target).hasClass('tgt')) {
$(e.target).addClass('active');
}
});
I attach a click handler using jquery's event delegation to all .tgt
elements. For some reason, if I click on the image, the event does not
bubble up to the li. Instead the event target is revealed to be the image.
Here's a fiddle: http://jsfiddle.net/CgC4V/
Why is the event not bubbling up to li.tgt?