JQuery stopPropagation on .live() when handlers already exist and are bound

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 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 eventStopPropogation 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 "outer" click from firing when clicking the "inner" div. I can not change the "outer" handler.

Thanks in advance for your help!!

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

HTML:

<div id="outer">
    outer
    <div id="inner">
        inner
    </div>
</div>

Javascript:

$("#outer").bind('click',function(e){
   alert("outer clicked"); 
});

$("#inner").live('click',function(e){
   alert("inner clicked"); 
});

Answer 1

use on delegate bound to outer and call e.stopPropagation() in inner click handler..this should dothe trick.

try this updated

$("#outer").bind('click',function(e){
  alert("outer clicked"); 
});

$('#outer').on('click',"#inner",function(e){
  e.stopPropagation();
  alert("inner clicked"); 

});

updated fiddle here

Answer 2

As you've already remarked, event delegation hinges on event bubbling and the use of a static element. The issue is complicated because there's nothing between the <div id="inner"> and <div id="outer"> elements, but we can get around that.

Set up a dynamic event handler for click events on the #inner element that's bound to #outer, and call event.stopImmediatePropagation() to prevent other event handlers from being executed. The downside is that this is dependent on the order in which the event handlers are bound, so your delegated event handler for #inner has to be bound before your static event handler for #outer.

$('#outer').on('click', '#inner', function(e) {
    console.log('inner');
    e.stopImmediatePropagation();
}).click(function(e) {
    console.log('outer');  
});

Take a look at this jsFiddle demo.

Answer 3

U can use

$("#outer").bind('click',function(e){
   alert("outer clicked"); 
});
$('#outer').on('click',"#inner",function(e){
    e.stopImmediatePropagation();
    alert("inner clicked"); 

});