Databases
StackOverflow2013
Postsdbo
POjquery stopPropagation problem with live method
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery stopPropagation problem with live method
    text
    copied!<p>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. </p> <h2>Code:</h2> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt; &lt;title&gt;Jquery Propagation and preventDetauls Example for Popup&lt;/title&gt; &lt;style type="text/css"&gt; .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;} &lt;/style&gt; &lt;script type="text/javascript" src="js/jquery-1.4.2.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(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"); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="tserviceslist" style="margin:25px;"&gt; &lt;div style="height: 178px; width: 178px;" id="icon-12608" class="icon white"&gt; &lt;div class="iconlinks"&gt; &lt;div class="info"&gt; &lt;a href="#" class="infolink" title="Click here to see more information about this Services." rel="nofollow"&gt;INFO&lt;/a&gt; &lt;div id="infomenu-12608" class="infomenu" style="display: none;"&gt;&lt;input type="button" value="clickme" class="clickme" /&gt;Information will come here&lt;/div&gt; &lt;/div&gt; &lt;div class="downloadlinks"&gt; &lt;h3 class="service-name"&gt;Cricket&lt;/h3&gt; &lt;/div&gt; &lt;/div&gt; &lt;br /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Thanking you, sureace.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload