使用delegate()和hover()？

Question

我有一个带有许多li项的ul元素:

<ul>
    <li></li>
    ...
</ul>

当用户将鼠标悬停在li元素上时,我想在li上显示一些隐藏的按钮,当它们停止悬停时,再次隐藏按钮.试图使用委托:

$("#myList").delegate("li", "hover", function () {
    if (iAmHovered()) {
        showButtons();
    } else {
        hideButtons();
    }
});

上面的内容被称为悬停和'un-hover'.我如何区分它是休假还是进入？

另外,我从这个问题得到了这个样本: .delegate相当于jQuery 1.4.2中现有的.hover方法

尼克说:

这取决于[#myList]没有被AJAX或其他方式替换,因为那是事件处理程序所在的位置.

我确实替换#myList的内容,使用:

$("#myList").empty();

会导致问题吗？

谢谢

Answer 1

您需要测试事件的类型,如下所示:

$("#myList").delegate("li", "hover", function ( event ) {
    if (event.type == 'mouseover') {
        showButtons();
    } else {
        hideButtons();
    }
});

由于只有一个处理程序可以为两个事件运行,我们正在检查哪个事件被触发,并运行相应的代码.

而不是直接绑定 hover到能够为两种事件类型接受两个处理程序的元素.

编辑:请注意,由于jQuery 1.4.3使用时所报道事件的类型'hover'用.delegate()或.live()不再是mouseover/mouseout(因为它应该是).现在它将是mouseenter/mouseleave,因为它们是非冒泡的事件,这看起来很愚蠢.

所以if()声明如下:

if (event.type == 'mouseenter') {
    //...