Question

I have a somewhat simple HTML table with the code

<table><tr><td id=tdFavicon><b>Favicon</b></td></tr></table>

and I want to bind an event to it using the code

$(tdFavicon).bind('click', saveOption);

but my problem is when I use the code

function saveOption() {alert(event.target.id);}

I get only the id “tdFavicon” alerted when the cell is clicked, and not when the text in the cell is clicked.

It seems to me that this should work, but maybe my code has become too complex. I changed it for this example. I could maybe make a span with an id for the text inside the table cell to bind to, but I would like to know why this is not working. Can anyone help me make this work?

Answer 1

Event’s bubble. That is when you click an element, it looks for a click handler on that element. If it doesn’t find one it looks on the parent element, then the parent’s parent, all the way up to the root element.

So event.target is the element that generated the event (the <b> tag), but NOT the element that handled it (the <td id="tdFavicon"> tag). jQuery provides the element that handled the event as the context of the called handler function (the value of this).

Which means, all you need to do is this:

function saveOption() {
    alert(this.id);
}
$('#tdFavicon').bind('click', saveOption);

Or perhaps more simply:

$('#tdFavicon').bind('click', function {
    alert(this.id);
});

Proof it works