Question

我有两个容器，一个在页面加载之前不生成的容器。最后生成的那个（<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>

如果我用“.first”替换“.last”它可以工作，我没有其他点击事件，所以我不明白为什么传播应该停止。我甚至将z-index：-1指定为最后一个。这必须非常简单，任何想法？

Last 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“最后”是可见的并且在顶部。这是项目的实际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>

我相信我弄清楚了，直到我发布了整棵树才意识到这一点。我觉得很蠢。 “button”div正在停止传播，因为它附加了一个jquery-ui事件。无论出于何种原因，Chrome和Firefox都无法呈现状态更改（即，将按钮显示为按下按钮）。这是因为“最后”div不在按钮上和下面。然而，就事件而言，它停在按钮处。奇怪的是，IE8将显示按下按钮（事件触发），这导致意识到这是错误。我完全忘记了jQuery-UI被挂在按钮上，这可能都显示div并阻止它显示。在按钮外移动div解决了这个问题。

如果jQuery有某种实时日志，你会看到整个事件泡沫向上，这将是非常好的。

Answer 1

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

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

Answer 2

.live()应该有效......

尝试为div添加边框，看看div是否确实存在...

你试过.delegate()吗？

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

jQuery事件冒泡，live（），点击事件不传播

2 个答案: