我有一个ul元素与许多li项目:
<ul> <li></li> ... </ul>
当用户将鼠标悬停在li元素上时,我想在li上显示一些隐藏的按钮,当它们停止悬停时,再次隐藏按钮.试图使用委托:
$("#myList").delegate("li","hover",function () { if (iAmHovered()) { showButtons(); } else { hideButtons(); } });
上面被称为悬停和“悬停”.如何区分是休假还是进入?
此外,我从这个问题得到这个样本:
.delegate equivalent of an existing .hover method in jQuery 1.4.2
尼克说:
This depends on [#myList] not getting replaced via AJAX or otherwise though,since that’s where the event handler lives.
我确实替换#myList的内容,使用:
$("#myList").empty();
会造成问题吗?
谢谢
解决方法
您需要测试类型的事件,如下所示:
$("#myList").delegate("li",function ( event ) { if (event.type == 'mouSEOver') { showButtons(); } else { hideButtons(); } });
因为这两个事件只能运行一个处理程序,所以我们检查哪个处理程序被触发,并运行相应的代码.
而不是直接将鼠标悬停在能够接受两个事件类型的两个处理程序的元素上.
编辑:请注意,从jQuery 1.4.3开始,使用.delegate()或.live()使用’hover’时报告的事件类型不再是mouSEOver / mouSEOut(因为它应该是).现在它将是mouseenter / mouseleave,这似乎是愚蠢的,因为它们是非冒泡事件.
所以if()语句如下所示:
if (event.type == 'mouseenter') { //...