JQuery stopPropagation on .live() when handlers already exist

Question

I'm aware that live calls bubble up through the doccument and that is why I'm having issues.

Unfortunately I'm using third party libraries that bind event handlers to elements and would like to create a case in which a click event isn't bubbled up to those elements.

using .click() in combination with eventStopPropagation() works just fine, however due to the dynamic nature of the content I need to use either live,on,delegate,etc... Here's a fidddle of my issue. I need to prevent "middle" click from firing when clicking the "inner" div. I can not change the "middle" handler (it is best if you consider I don't even have access to it).

Thanks in advance for your help!! And sorry for the repeat, I thought it would be tidier this way.

http://jsfiddle.net/99zQM/9/

HTML:

<div id="outer">
    outer non dynamic element
    <div id="middle">
        middle dynamic
        <div id="inner">
            inner dynamic
        </div>
    </div>
</div>

Javascript:

$("#middle").bind('click',function(e){
    //is rebound when content is loaded
   alert("middle clicked"); 
});
$('#inner').live('click',function(e){
    alert("inner clicked"); 
});

Answer 1

Use this code

$(document).bind('click',function(e) {
    if (e.target)
        target = e.target;
    else if (e.srcElement)
        target = e.srcElement;
    else
        target = e.currentTarget;

    if (target.id == 'middle') 
    {
    alert("middle clicked"); 
    }

       else if (target.id == 'inner')
       {
       alert("inner clicked"); 
       }
});

http://jsfiddle.net/99zQM/12/