jQuery jquery实时悬停
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2262480/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery live hover
提问by Jorre
I'm using the following jquery code to show a contextual delete button only for table rows we are hovering with our mouse. This works but not for rows that have been added with js/ajax on the fly...
我正在使用以下 jquery 代码来显示上下文删除按钮，仅用于我们用鼠标悬停的表行。这有效，但不适用于使用 js/ajax 动态添加的行...
Is there a way to make this work with live events?
有没有办法使这项工作与现场活动一起工作？
$("table tr").hover(
function () {},
function () {}
);
回答by Philippe Leybaert
jQuery 1.4.1 now supports "hover" for live() events, but only with one event handler function:
jQuery 1.4.1 现在支持 live() 事件的“悬停”，但只有一个事件处理函数：
$("table tr").live("hover",
function () {
});
Alternatively, you can provide two functions, one for mouseenter and one for mouseleave:
或者，您可以提供两个函数，一个用于 mouseenter，一个用于 mouseleave：
$("table tr").live({
mouseenter: function () {
},
mouseleave: function () {
}
});
回答by dmitko
$('.hoverme').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
// do something on mouseover
} else {
// do something on mouseout
}
});
回答by Andre
.live()has been deprecated as of jQuery 1.7
.live()自 jQuery 1.7 起已弃用
Use .on()instead and specify a descendant selector
使用.on()替代并指定后代选择
$("table").on({
mouseenter: function(){
$(this).addClass("inside");
},
mouseleave: function(){
$(this).removeClass("inside");
}
}, "tr"); // descendant selector
回答by Tatu Ulmanen
As of jQuery 1.4.1, the hover event works with live(). It basically just binds to the mouseenter and mouseleave events, which you can do with versions prior to 1.4.1 just as well:
从 jQuery 1.4.1 开始，悬停事件适用于live(). 它基本上只是绑定到 mouseenter 和 mouseleave 事件，您也可以在 1.4.1 之前的版本中执行此操作：
$("table tr")
.mouseenter(function() {
// Hover starts
})
.mouseleave(function() {
// Hover ends
});
This requires two binds but works just as well.
这需要两次绑定，但也能正常工作。
回答by Jorge E. Cardona
This code works:
此代码有效：
$(".ui-button-text").live(
'hover',
function (ev) {
if (ev.type == 'mouseover') {
$(this).addClass("ui-state-hover");
}
if (ev.type == 'mouseout') {
$(this).removeClass("ui-state-hover");
}
});
回答by Brian
WARNING: There is a significant performance penalty with the live version of hover. It's especially noticeable in a large page on IE8.
警告：悬停的实时版本存在显着的性能损失。在 IE8 上的大页面中尤其明显。
I am working on a project where we load multi-level menus with AJAX (we have our reasons :). Anyway, I used the live method for the hover which worked great on Chrome (IE9 did OK, but not great). However, in IE8 It not only slowed down the menus (you had to hover for a couple seconds before it would drop), but everything on the page was painfully slow, including scrolling and even checking simple checkboxes.
我正在做一个项目，我们用 AJAX 加载多级菜单（我们有我们的理由：）。无论如何，我使用 live 方法进行悬停，在 Chrome 上效果很好（IE9 做的不错，但不是很好）。然而，在 IE8 中，它不仅减慢了菜单（你必须在它下降之前悬停几秒钟），而且页面上的所有内容都非常缓慢，包括滚动甚至检查简单的复选框。
Binding the events directly after they loaded resulted in adequate performance.
在事件加载后直接绑定事件会产生足够的性能。
