jquery stopPropagation problem with live method

Question

Jquery stopPropagation method dosen\'t work with live method. Below the code is works fine with click instead of live method. Any help greatly appreciated.

Code:<

Answer 1

You just need to change the order of your handlers a bit, and use/check for propagation stopping, like this:

$("a.infolink").live("click",function(e){
    $("a.infolink").removeClass("selected");
    $("div.infomenu").hide();
    $(this).addClass("selected");
    $(this).next().show();
    e.stopPropagation();
});
$("div.infomenu").live("click",function(e){
    e.stopPropagation();
});
$(document).click(function(e){
    if(e.isPropagationStopped()) return;  //important, check for it!
    $("a.infolink").removeClass("selected");
    $("div.infomenu").hide();
});
$("input.clickme").click(function(e){
    alert("I am fired");
});​

Give it a try here, there are a few important points to keep in mind:

• .live() handlers are on document
• Event handlers execute in the order they were bound to any given element

You need to stop and check the propagation since we're at the same level. .stopPropagation() would prevent the bubbling from going any higher but that doesn't matter, it's at the same level in the DOM, so you need to check if it was stopped, using .isPropagationStopped(). Also, since the handlers fire in order, you need to bind that document.onclick after your other event handlers, otherwise it'll execute first, before the others tried to stop propagation.

Answer 2

I had no problems using pure javascript for the same. Though this doesn't relate to OP's question(looks complicated) just posting this answer for others who prefers JS over jQuery

HTML:

<div class="ac_results">
<ul>
    <li class=""><span class="chkfix">
        <input type="checkbox" value="ABCD" name="sug_0" id="sug_0"><label for="sug_0">ABCD</label></span>
   </li>
   <li class=""><span class="chkfix">
        <input type="checkbox" value="abc" name="sug_1" id="sug_1"><label for="sug_1">abc</labe></span>
   </li>
</ul>

jQuery:

$(".ac_results li").live('click', function() {
   alert('li called')
});

$(".ac_results li input[type='checkbox']").live('click', function(e) {        
   e.stopPropagation();            //does not work
   alert('check box called');
});

Javascript:

//get child elements
var checkbox = document.getElementsByTagName('input');
for(var i=0;i<checkbox.length;i++){ 
     checkbox[i].onclick = callCheck; 
}
//get parent element
var li = document.getElementsByTagName('li');
for(var j=0;j<li.length;j++){ 
     li[j].onclick = liClick; 
}

function liClick(e){ 
    alert('list item clicked'); 
}
//stop the event propagation to parent elements
function callCheck(e){ 
    e.stopPropagation(); 
    alert('checkbox clicked'); 
}

var checkbox = document.getElementsByTagName('input');
for (var i = 0; i < checkbox.length; i++) {
  checkbox[i].onclick = callCheck;
}
var li = document.getElementsByTagName('li');
for (var j = 0; j < li.length; j++) {
  li[j].onclick = liClick;
}

function liClick(e) {
  alert('list item clicked');
}

function callCheck(e) {
  e.stopPropagation();
  alert('checkbox clicked');
}

<div class="ac_results">
  <ul>
    <li class=""><span class="chkfix">
            <input type="checkbox" value="ABCD" name="sug_0" id="sug_0"><label for="sug_0">ABCD</label></span>
    </li>
    <li class=""><span class="chkfix"><input type="checkbox" value="abc" name="sug_1" id="sug_1"><label for="sug_1">abc</label></span>
    </li>
  </ul>
</div>

Answer 3

That is because .live() relies on event propagation.

The event is not actually placed on the element, but rather on the root node. The event then bubbles up to that node, checks the selector to see if it has a match, and fires if so.

Because the event isn't fired until it is already at the top of the hierarchy, there's no propagation left to stop.