Jquery悬停功能在使用ajax调用的子页面中的IE中不起作用

Question

我有一个jsp，其中我加载了一个简单的下拉菜单，并使用ajax jquery获得子菜单。

我有一个主jsp，当用户选择一个按钮时，调用下拉jsp并在主jsp中显示它。

在火狐中，当ajax调用是completed.In IE时，我可以通过在主菜单上咆哮来看到所有子菜单，虽然我可以看到在ajax调用之后加载的父菜单，但我无法查看子菜单。似乎负责显示子菜单的悬停功能没有被触发。我正在使用Jquery1.4.4.min.js

注意：-如果我把整个代码放在一个普通的jsp中，下拉菜单在IE中就能正常工作。当我仅使用ajax调用调用页面时，我就会遇到这个问题。

有人能想出问题出在哪里吗？

以下是内容

使用ajax调用的JSP代码片段

<ul class="dropdown">
<li><a href="#">Books-Videos</a>



<ul class="sub_menu">
           <li><a href="#">Turf Management</a></li>
              <li><a href="#">Training</a>  
                  <ul  class="sub_menu">
                   <li><a href="#">Dugouts</a></li>
              <li><a href="#">Foul Poles</a></li>
              <li><a href="#">Netting</a></li>
              <li><a href="#">Scoreboards</a></li>
                  </ul>
                  </li>
            </ul>
          </li>
        </ul>

使用的HOVER JS函数

$(function(){

    $("ul.dropdown li").hover(function(){

        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');

    }, function(){

        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');

    });

    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");

});

使用的CSS样式

/* Dropdown style */
ul.dropdown { position: relative; width:145px; margin:20px 0px; z-index:9000; }
ul.dropdown li { list-style:none; zoom: 1; background: #ebebeb; margin-left:0px;}
ul.dropdown a:hover { color: #000; text-decoration:none;}
ul.dropdown a:active color: #ffa500; }
ul.dropdown li a { display: block; padding: 4px 8px; 
  border-bottom: 1px solid #fff; color: #222;text-decoration:none; }
ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover { background: #dedede; color: black; position: relative; }
ul.dropdown li.hover a { color: black; }

/* LEVEL TWO */
ul.dropdown ul { width: 140px; visibility: hidden; 
  position: absolute; top: 0%; left: 140px; z-index:9000; }
ul.dropdown ul li { font-weight: normal; background: #dedede; color: #000; 
  border-bottom: 1px solid #ccc; float: none; margin:0px; }

/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a { border-right: none; display: block; margin: 0px; 
  color:#666; } 

/* LEVEL THREE */
ul.dropdown ul ul { left: 100%; top: 0; }
ul.dropdown li:hover > ul { visibility: visible; }

Answer 1

$("ul.dropdown li").live('hover', function(){}, function(){});

使用JQuery.live将事件绑定到稍后动态添加的dom元素。

http://api.jquery.com/live/

Answer 2

尝试使用.delegate“基于一组特定的根元素，将一个处理程序附加到与选择器匹配的所有元素的一个或多个事件”。

$("ul.dropdown").delegate("li", "hover", function() {
    $(this).addClass("hover");
    $('ul:first',this).css('visibility', 'visible');
}, function(){
    $(this).removeClass("hover");
    $('ul:first',this).css('visibility', 'hidden');
});

.live几乎做了同样的事情，但是.live不能用于链接-它需要直接在选择器上使用。示例：

// won't work
$("#foo").children("table").find("tr").live("click",function() {...

// will work
$("#foo").children("table").delegate("tr","click",function() {...

此外，如果没有指定上下文，.live会将事件处理程序附加到文档元素，这会显著影响性能。这种性能影响可以通过显式指定上下文来减轻(适用于jQuery 1.4 +)：

$("li",$("ul.dropdown")[0]).live("hover",function() {...

最后，您不能停止.live事件的传播。从docs

由于.live()方法在事件传播到文档顶部后对其进行处理，因此无法停止实时事件的传播。类似地，由.delegate()处理的事件将始终传播到它们被委托的元素；在调用委托的事件处理程序时，它下面的任何元素上的事件处理程序都已经执行了。

总之，不要犹豫，使用.delegate吧！