使用live方法的jquery stopPropagation问题

Jquery stopPropagation方法不适用于live方法。 代码下方可以正常使用click而不是live方法。 任何帮助非常感谢。

码：

      .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;}    $(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"); }); });    
 
 
 
 INFO 
Information will come here
 
 
 
Cricket
 
 
 
 
 
   

谢谢你，确定。

Answer 1

您只需稍微更改处理程序的顺序，并使用/ check进行传播停止，如下所示：

 $("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"); });​ 

在这里尝试一下 ，需要记住几个要点：

• .live()处理程序在document
• 事件处理程序按照绑定到任何给定元素的顺序执行

你需要停止并检查传播，因为我们处于同一水平。 .stopPropagation()可以防止冒泡进入任何更高的但是无关紧要，它在DOM 中处于同一级别 ，因此您需要使用.isPropagationStopped()检查它是否已停止。 此外，由于处理程序按顺序触发，您需要在其他事件处理程序之后绑定该document.onclick ，否则它将首先执行，然后其他人尝试停止传播。

Answer 2

那是因为.live() 依赖于事件传播。

事件实际上并不放在元素上，而是放在根节点上。 然后该事件冒泡到该节点，检查选择器以查看它是否匹配，如果是，则触发。

因为事件在它已经位于层次结构的顶部之前才被触发，所以没有任何传播可以停止。

Answer 3

我没有使用纯javascript同样的问题。 虽然这与OP的问题（看起来很复杂）没有关系，但只是为那些喜欢JS而不是jQuery的人发布这个答案

HTML：

 
 
 
 ABCD 
 
 abc 
  

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 

 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'); } 

 
 
 
 ABCD 
 
abc