Question

I have a clickable table row:

$("#content-display").on('click', '#myTable tbody tr', function (){           
    foo();        
});

The table is in the format

<table>
<tbody>
    <tr><td><div><span></span></div></td></tr>
    <tr><td><div><span></span></div></td></tr>
    <tr><td><div><span></span></div></td></tr>
    <tr><td><div><span></span></div></td></tr>
</tbody>
</table>

When a user clicks directly in the span in the 3rd I want to call only the function bar() (not foo())

$("#content-display").on('click',
                         '#myTable tbody tr td:first-child + td + td div span',
                          function (){
    bar(); 
});

Unfortunately, when a user clicks on that span, both foo() and bar() are called.

I tried this as well, but still both foo() and bar() are called.

$("#content-display").on('click',
                         '#myTable tbody tr td:first-child + td + td div span',
                          function (event){
    event.preventDefault();
    bar(); 
});

Answer 1

event.stopPropagation() is what you are looking for.

See the jQuery docs for more information.