现有.hover方法的.delegate等效jQuery中1.4.2(.delegate equiv

我已绑定到使用.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更换或以其他方式，虽然，因为这是事件处理住在哪里。 如果要更换它，你必须附上对其他没有得到更换更高的祖先委托。

另外一个小幅调整， $(".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> = 1.4.3 -对旧版本使用鼠标悬停代替了mouseenter的。

文章来源: .delegate equivalent of an existing .hover method in jQuery 1.4.2