Home/ Questions/Q 947287
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T23:03:29+00:00

Jquery stopPropagation method dosen’t work with live method. Below the code is works fine

  • 0

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Jquery Propagation and preventDetauls Example for Popup</title>
<style type="text/css">
 .icon.white{background:#FFFFFF;}
 .icon{-moz-border-radius:2px 2px 2px 2px;-moz-box-shadow:0 1px 2px #EAEDF4;background-color:#FFFFFF;border:1px solid #E4E8F1;float:left;margin:0 1% 1% 0;text-align:center;}
 .iconlinks{height:20px;}
 .info{float:right;}
 .icon a.infolink, .downloadlinks a, .iconza a.changecolor {color:#718DB5;display:block;font-size:10px;padding:4px 7px;text-decoration:none;}
 .icon .infolink {background-image:url(images/dwn-arrow.gif);background-position:35px center;background-repeat:no-repeat;padding-right:17px !important;position:relative;}
 .downloadlinks{float:left;width:130px;overflow:hidden;}
 .downloadlinks a{float:left;}
 .infolink:hover{background-image:url(images/arrow-white.gif);}
 .infolink:hover{background-color: #1f75cc;color: white !important;text-decoration: none !important;}
 .infolink.selected{z-index: 100;color: white !important;background-color: #1f75cc !important;background-image: url(images/arrow-white.gif) !important;}
 .icon-image{border:0px;}
 .service-name{font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:24px;color:#74767A;margin:3px;text-align:left;}
 .describe-icons{position:absolute;right:2px;bottom:2px;}
 .infomenu{text-align:left;margin-left:-150px;margin-top:-1px;position:absolute;width:260px;-moz-box-shadow:2px 2px 5px #2F3B4A;background-color:#FFFFFF;border:2px solid #1F75CC;z-index:50;}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
 $(function(){
  $(document).click(function(){
   $("a.infolink").removeClass("selected");
   $("div.infomenu").hide();
  });
  $("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();
   //e.preventDefault();
  });
  $("input.clickme").click(function(e){
   alert("I am fired");
  });
 });
</script>
</head>
<body>
<div id="tserviceslist" style="margin:25px;">         
 <div style="height: 178px; width: 178px;" id="icon-12608" class="icon white">            
  <div class="iconlinks">    
   <div class="info">
    <a href="#" class="infolink"  title="Click here to see more information about this Services." rel="nofollow">INFO</a>              
    <div id="infomenu-12608" class="infomenu" style="display: none;"><input type="button" value="clickme" class="clickme" />Information will come here</div>
   </div>
   <div class="downloadlinks">
    <h3 class="service-name">Cricket</h3>            
   </div>
  </div>
  <br />

 </div>        


</div>
</body>
</html>

Thanking you,
sureace.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0