detecting child of click handler

detecting child of click handler

Suppose I have some HTML that looks like this:
<div id="TheTable">
<div class="TheRow">
<div class="Col Col1">col1</div>
<div class="Col Col2">col2</div>
<div class="Col Col3">col3</div>
</div>
</div>
I'm binding a click handler for rows, something like this:
$(document).ready(function () {
$('#TheTable').on({
click: function () { alert('clicked on row'); }
}, '.TheRow');
});
As you can see, the click on any cell of a row triggers the click function.
I want to change this so that when a click happens, I can get the index or
the class of the Col element that was actually clicked on. So for
instance, if the lick happened on a .Col2 element, I want to get the index
(ie. 1) or the class (ie. Col Col2).
How do I do this?
The jsFiddle is here.