Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery stopPropagation problem with live method

Tags:

jquery

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.

like image 965
user400091 Avatar asked Jul 28 '10 13:07

user400091


People also ask

How to stop propagation in jQuery?

The event.stopPropagation () method is an inbuilt method in jQuery which is used to stop the windows propagation. In the DOM tree when setting an event with the child element and the parent element as well then if you hit on the child element event it will call both child and the parent element as well.

What is stopImmediatePropagation in jQuery?

The event.stopImmediatePropagation () is an inbuilt method in jQuery used to stop the rest of the event handlers from being executed for the selected element. Parameter: No parameter is required. Return Value: This method return the selected element with the applied change.

What is the use of event stopPropagation?

Last Updated: 17-07-2019 The event.stopPropagation () method is an inbuilt method in jQuery which is used to stop the windows propagation. In the DOM tree when setting an event with the child element and the parent element as well then if you hit on the child element event it will call both child and the parent element as well.

Is it possible to stop propagation of live events?

Note that this will not prevent other handlers on the same element from running. Since the .live () method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events.


2 Answers

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.

like image 68
Nick Craver Avatar answered Sep 20 '22 02:09

Nick Craver


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.

like image 23
user113716 Avatar answered Sep 17 '22 02:09

user113716