嵌套 div 中的元素，jquery 事件不起作用答案

【问题标题】：a element in nested divs, jquery events not working嵌套 div 中的元素，jquery 事件不起作用
【发布时间】：2010-01-08 11:01:20
【问题描述】：

我想在一些嵌套的 div 中使用锚元素的事件，但在我的代码中有些东西不起作用。

我在该选择器上尝试了数百种变体，但仍然无法正常工作。

html代码：

<div class="tabContents">
  <div class="thumbArea">
  <a href="#">
    <img src="foo" alt="baba"/>
  </a>
  </div>
  <div class="imageArea">
  </div>
</div>

JS：

$(function(){

  $(".tabContents a").hover(function() {
  alert("just work!");
  });

});

【问题讨论】：

标签： jquery html css-selectors anchor

【解决方案1】：

jQuery hover 有两个函数，一个“over”和一个“out”。

$(".tabContents a").hover(function() {
     alert("mouse over!");
   }, function(){
      alert("mouse out!");
});

如果您只是在寻找鼠标悬停，我建议：

$(".tabContents a").mouseover(function() {
    alert("just work!");
});

进一步回复：

尝试使用 jQuery 的 live 事件。这将确保事件侦听器也将关注添加到 DOM 的任何新元素（例如您要附加的元素）。但是，live 目前不支持hover。您可以执行 mouseover 和 mouseout 事件以达到相同的效果。

$('.tabContents a').live('mouseover', function(){
   alert('mouseover!');
});

$('.tabContents a').live('mouseout', function(){
   alert('mouseout!');
});

我想我看到有人为 jQuery 编写了一个扩展，允许使用 live 的“悬停”来回答关于 SO 的问题，所以它可以完成，但是唉，我似乎不能找到它。

【讨论】：

jQuery.fn.liveHover=function(over,out) { if (over) this.live('mouseover',over); if (out) this.live('mouseout',out); return this;}; 可能会工作:)
@gnarf：这不是我看到的方式，但我想这意味着我被困在“盒子里”。非常感谢你把我拉出来。 ;)
@munch：您的解决方案正是我想要的。谢谢你。 @gnarf：我会把它用作一个事件还是什么？

【解决方案2】：

您的代码（逐个字符复制）对我来说非常有效。（注意：Windows 上的 Firefox。）

尝试使用firebug，看看它是否可以帮助您确定正在发生的事情。

【讨论】：