Question

我有一个使用.hover方法绑定到悬停事件的事件处理程序，如下所示：

$(".nav li").hover(function () {
    $(this).addClass("hover");
}, function () {
    $(this).removeClass("hover");
});

重要的是要注意，我需要处理程序中的两个函数来确保同步。是否可以使用.delegate重写函数，因为以下不起作用？

$(".nav").delegate("li", "hover", function () {
    $(this).addClass("hover");
}, function () {
    $(this).removeClass("hover");
});

富

Answer 1

尝试这种方法：

$(".nav").delegate("li", "hover", function () {
    $(this).toggleClass("hover");
});

这取决于.nav不能通过AJAX或其他方式替换，因为那是事件处理程序所在的位置。如果要替换它，则必须将代理附加到 not 被替换的更高祖先。

同样是次要更正，$(".nav li").hover(function () {未使用.live()方法，即：$(".nav li").live('hover', function () {。当代码运行时，.hover()会将事件直接绑定到元素...任何未来的元素都不会触发悬停代码，即.live()和.delegate()不同的地方，它们可以处理未来的元素通过鼓泡。

Answer 2

添加/删除类尼克的解决方案是完美的，因为jQuery提供了适当的toggleClass方法。

如果您需要触发更复杂的功能，而这些功能没有相应的切换方法，您可以通过测试事件类型来实现：

$(".nav").delegate("li", "hover", function (event) {
if(event.type == "mouseenter"){
    $(this).find(".subDiv").slideDown();
}else{
    $(this).find(".subDiv").slideUp();
}
});

这适用于jQuery＆gt; = 1.4.3 - 旧版本使用 mouseover 而不是 mouseenter 。

.delegate相当于jQuery 1.4.2中现有的.hover方法

2 个答案: