Stop propagation on live elements

Question

I'm having an issue with stopping event propagation. Imagine this scenario:

<table id="test">
    <tbody>
        <tr>
            <td class="row"> </td>
            <td class="row"> </td>
            <td class="row"> </td>
            <td class="row"> </td>
            <td class="row"> </td>
        </tr>
        <tr>
            <td class="row"> </td>
            <td class="row"> </td>
            <td class="row"> </td>
            <td class="row"> </td>
        </tr>
    </tbody>
</table>​

And then this code:

(function(){
    $('td.row').on('click', function(e){
        if (! e.isPropagationStopped())
             alert('Row clicked!');        
    });
    $('table#test').on('click', 'img.live', function(e){
        e.stopPropagation();
        alert('Image clicked!');            
    });
    $('td.row').html('<img src="http://fc03.deviantart.net/fs71/f/2011/161/f/c/nyan_cat_avatar_by_oxoxnaminemayxoxo-d3il6gm.gif" class="live">');
})();​

Whenever a image is clicked both events are fired. I want that just fires the event on the clicked element. I know that since they are live they are fired once propagation has ended but, is there any workaround?

As far as I've investigated, both events are practically the same but srcElement changes from HTMLTableCellElement to HTMLImageElement . Is this cross-browser consistent?

I've put a demo in jsFiddle in case you want to watch in action.

Answer 1

Here's a demo

The problem is the event has to climb to the parent to find a handler for <img> . So it has to pass through <td> and fires its handler immediately since it's not a delegated handler.

*click*   ,-----------------> (1) fire direct td handler
  img -> td -> tr -> table  
                       '----> (2) fire delegated img handler
                       X<---- (3) e.stopPropagation() //too late!

One way to prevent the double event is also add <td> 's handler to the table as well. jQuery will then evaluate the two handlers, start with the deepest event and if any of those handlers has e.stopPropagation() , events higher up will not fire.

$('table#test').on('click', 'img.live', function(e){
    e.stopPropagation();
    alert('Image clicked!');            
});

$('table#test').on('click','td.row', function(e){
     alert('Row clicked!');        
});

*click*                
  img -> td -> tr -> table
                       '----> (1) fire delegated img handler
                       X<---- (2) e.stopPropagation()
                       '----> (3) fire delegated td handler //never gets fired

Answer 2

Maybe I'm wrong, but can't you use event delegation here?

(function(){
    $('#test').on('click', function(e){
        if ( !/img$/i.test((e.target || e.eventSrc).nodeName)){
          alert('row clicked');
        } else {
          alert('image clicked');
        }           

    });
    $('td.row').html('<img src="'+
                     'http://fc03.deviantart.net/fs71/f/2011/'+
                     '161/f/c/nyan_cat_avatar_by_'+
                     'oxoxnaminemayxoxo-d3il6gm.gif" class="live">');
})();​

It saves you the hassle with propagation. Here's a jsfiddle