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

发布于 2024-08-27 14:16:04 字数 427 浏览 7 评论 0原文

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

富有的

原文

I have an event handler bound to the hover event using the .hover method, which is below:

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

It is important to note, that I require both functions within the handler to ensure synchronisation. Is it possible to rewrite the function using .delegate, as the following does not work?

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

Rich

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小女人ら 2024-09-03 14:16:04

尝试这种方法：

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

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

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

Try this approach:

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

This depends on .nav not getting replaced via AJAX or otherwise though, since that's where the event handler lives. If it is being replaced, you have to attach the delegate on a higher ancestor that's not getting replaced.

Also a minor correction, $(".nav li").hover(function () { isn't using the .live() method, that would be: $(".nav li").live('hover', function () {. .hover() binds the event directly to the element when that code runs...any future elements wouldn't trigger that hover code, that's where .live() and .delegate() differ, they work on future elements via bubbling.

回复收藏 0 原文

倾城月光淡如水﹏ 2024-09-03 14:16:04

要添加/删除类，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 - 对于旧版本，请使用鼠标悬停 em> 而不是 mouseenter。

To add/remove a class Nick's solution is perfect as jQuery provides the appropriate toggleClass method.

If you need to trigger more complex functions that do not have a corresponding toggle method available, you can do that by testing the event type:

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

This will work for jQuery >=1.4.3 - for older versions use mouseover instead of mouseenter.

回复收藏 0 原文

~没有更多了~