jQuery 事件冒泡，live()，点击事件不传播答案

【问题标题】：jQuery Event Bubbling, live(), click event not propagatingjQuery 事件冒泡，live()，点击事件不传播
【发布时间】：2011-03-19 08:02:49
【问题描述】：

我有两个容器，一个在页面加载之前不会生成。最后生成的 (<div class=last></div>) 应该出现在第一个之上。从视觉上看，它确实掩盖了第一个。但是，我无法让“.last”响应live() 点击事件。它将响应第一个 div，但不响应最后一个 div（同样，视觉上出现在前景中的 div）。这让我发疯，页面上没有其他点击事件。要清楚这是我的页面：

<body>
<div class="first">First div</div>
<script type="text/javascript">
// This works
 $('body').append($('<div/>').addClass('last').text('last div')); 
//This does not
 $('.last').live('click', function(e) {
      alert('hello');
 }); 
</script>
</body>

如果我将 .last 替换为 .first 它可以工作，我没有其他点击事件，所以我不明白为什么传播应该停止。我什至将 z-index: -1 分配到最后。这必须非常简单，有什么想法吗？

最后一个 div 的 CSS：

-moz-box-shadow:0 4px 10px 0 #8B8B8B;
background-color:white;
cursor:default;
margin:0 0 0 2px;
padding:4px 0;
position:absolute;

第一个 div，没有 CSS。

编辑：我的 DOM 结构比上面的例子复杂一点。我很肯定 div "last" 是可见的并且在顶部。这是项目的实际 DOM 结构：

<div>
 <button> (when button is pressed last is created)
  <span>
   <div>
    <div class="last"></div>
   </div>
  </button>  
 </div>
 <table>
  <thead>
   <tr>
    <td><div class="first"></div></td>
   </tr>
  </thead>
 </table>

我相信我已经弄清楚了，直到我发布了我的整棵树时才意识到这一点。我觉得自己好傻。 “按钮” div 正在停止传播，因为它附加了一个 jquery-ui 事件。无论出于何种原因，Chrome 和 Firefox 都不会呈现状态变化（即显示按钮被按下）。这是因为“最后一个”div 不在按钮上及其下方。然而就事件而言，它停在按钮上。奇怪的是，IE8 会显示按钮被按下（事件触发），这导致意识到这是错误。我完全忘记了 jQuery-UI 被挂在按钮上，它既可以显示 div 又可以阻止它显示。将 div 移到按钮之外解决了这个问题。

如果 jQuery 有某种实时日志，您可以在其中看到整个事件向上冒泡，那就太好了。

【问题讨论】：

你能发布定位 div 的 css 吗？
尝试在绝对 div 的父级上创建绝对 div left:0、top:0 和更高的 z-index，然后 position:relative ..

标签： javascript jquery jquery-events

【解决方案1】：

.live() 应该可以工作...

尝试为div 添加边框，看看div 是否真的存在...

你试过.delegate()吗？

$('body').delegate('.last', 'click', function(){
    alert('hello')
});

【讨论】：

【解决方案2】：

您需要在$(body) 块中为body 加上引号，因为没有名为body 的变量。

$('body').append($('<div/>').addClass('last').text('last div'));

【讨论】：

那是我草率的复制编辑，我没有校对“this works”部分的代码。感谢您指出。
没错，它似乎确实有效。我试图复制您的问题但失败了：jsfiddle.net/nfYsu。 @KieselguhrKid 还有什么你遗漏的可能导致这个问题的东西吗？