jquery parent child click event handling

Question

I have a table row with 2 columns that I add dynamically (below).

var lientry='<tr id=\"'+kmlFeatureData.type+kmlFeatureData.id+'\">
<td>blah blah</td>
<td><a class="msg_head">'+'click for more</a></td></tr>';

I have a click handler for the first column id=... which works fine, and I would like to have a second click handler for the second column class="msg_head", but when I try to catch it, it only calls the parent handler.

I have tried suggestions, such as stopping propagation, with no luck.

$(".msg_head a").click(function(e) {
    e.stopPropagation();
    alert('jquery msg_head click');
});

Any suggestions?

Are you adding the rows after assigning the event handler? Then you need to delegate the event using `.on`. — Barmar, Oct 29 '12 at 03:02

score 1 · Accepted Answer · answered Oct 29 '12 at 02:55

1

Your selector is wrong. Use a.msg_head instead:

$("a.msg_head").click(function(e) {
    alert('jquery msg_head click');
});

Or just get rid of the tag selector, and use $(".msg_head").

answered Oct 29 '12 at 02:55

Joseph Silber

214,931
59
362
292

jquery parent child click event handling

1 Answers1