.delegate 等效于 jQuery 1.4.2 中现有的 .hover 方法答案

【问题标题】：.delegate equivalent of an existing .hover method in jQuery 1.4.2.delegate 等效于 jQuery 1.4.2 中现有的 .hover 方法
【发布时间】：2010-04-07 11:14:18
【问题描述】：

我有一个使用 .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");
});

丰富

【问题讨论】：

标签： jquery event-handling hover delegates

【解决方案1】：

试试这个方法：

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

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

还有一个小修正，$(".nav li").hover(function () { 没有使用.live() 方法，那就是：$(".nav li").live('hover', function () {。 .hover() 在代码运行时将事件直接绑定到元素...任何未来的元素都不会触发该悬停代码，这就是 .live() 和 .delegate() 的不同之处，它们通过冒泡作用于未来的元素。

【讨论】：

很尴尬。盲目地假设我正在转换 .live 方法而不是 .hover 方法，今天的眼睛显然没有正确聚焦。所以+1。关于依附于有可能被程序替换的父母。我没有意识到限制，并且一直依附于绑定时不一定存在的父母。
@kim3er - 使用您当前的方法，它们必须在绑定时存在，否则选择器将找不到/绑定任何东西:) 如果您当前的方法有效，我发布的委托方法也应该，试一试，如果您有其他问题，请告诉我。
对不起，我指的是 .delegate 方法，而不是最后一句中的 .hover。
你又是对的。 .delegate 方法需要附加到静态元素，当您考虑它时，这非常有意义。感谢您的所有帮助。
关于原始问题。我将保留 .hover 方法，因为目前似乎没有使用 .delegate 的直接替代方法。

【解决方案2】：

添加/删除一个类 Nick 的解决方案是完美的，因为 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 - 对于旧版本使用 mouseover 而不是 mouseenter。

【讨论】：