Search code examples
jqueryclickparentstoppropagation

jquery parent child click event handling

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?

Solution

  • 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").