JQuery stopPropagation on .live() when handlers already exist [duplicate]

Question

This question already has answers here:

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

Closed 9 years ago.

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/

Answer 2

You would use .on for binding click event. For each binding to #outer, #middle and #inner. Use stopPropagation to prevent bubble up event.

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

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

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

jsFiddle example : http://jsfiddle.net/99zQM/11/

Answer 3

You may try to capture the click handler and dynamically wrap it in another handler which tests for event bubbling like this :

// Your code does not change

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

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

// capture the click handler on #middle and wrap it inside a test for bubbling
var handler = $._data($("#middle")[0], "events")["click"][0].handler;
$('#middle').unbind('click');

$("#middle").bind('click',(function(handlerVar){return function(e){
    if(e.target===this) // test for bubbling
    {
        handlerVar(e);
    }
}})(handler));

see : http://jsfiddle.net/99zQM/13/

Hope this will help