stoppropagation on div inside table not working

Question

When a div inside a table is clicked stoppropagation does not trigger until after click bubbles to tr. How do I stop bubbling out of the div?

http://jsfiddle.net/tcbnW/ dictates my issue

div clicked! → tr clicked! → STOP triggered

I need

div clicked! → STOP triggered

html code below

<table>
    <tr onclick="$('#INFO').append('tr clicked!<BR>');">
        <td>
            <div onclick="$('#INFO').append('div clicked!<BR>');" style="font-weight:bold;" class="STOP">test div</div>
        </td>
    </tr>
</table>
<div id="INFO" style="border:1px solid #F00;"></div>

script

$(document).on('click','.STOP',function(event){
       $('#INFO').append('STOP triggered<BR>');
       event.stopPropagation();
       });

using jquery 1.9

Answer 1

try to remove the onclick event from the div. Basically you are having 2 listeners for the same event one is embedded within the onclick and the second one is $(document).on

Take a look at this: [a link] http://jsfiddle.net/tcbnW/1/ . This is one addition

event.stopImmediatePropagation();

I think this should work.

Answer 2

You should not mix “traditional” event handling (onfoo HTML attributes) and “modern” event handling (using addEventListener etc.), as jQuery does – unexpected results are bound to occur.