Overriding Parent's Element Click Event from Child Element

Question

I have following HTML:

<table>
    <tr>
        <td><div>test</div></td>
        <td>Some Text</td>
    </tr>
</table>

Using JQuery, I have some code that runs when user click on TR element. It works well.

However, when someone click the DIV inside the TD element, I want only the "click" event of the DIV and not the parent's TR "click" event.

How can I do that?

Thanks all in advance!

Answer 1

use stopPropagation:

$(function() {
    $('tr').bind('click', function (e) {
        console.log('tr');
    });
    $('div').bind('click', function(e) {
        e.stopPropagation();
       console.log('div');
   });

});

jsfiddle

Answer 2

event.stopImmediatePropagation() worked for me :)