logo标签列表

jQuery实时悬停

jquerylivejquery-1.4
161
我正在使用下面的jQuery代码，只在我们鼠标悬停的表格行中显示上下文删除按钮。这个方法有效，但对于通过js/ajax添加的行无效... 是否有办法使这个方法适用于动态添加的行？
```javascript 我使用以下jQuery代码仅在鼠标悬停的表格行中显示上下文删除按钮。 这个方法有效，但对于通过js / ajax添加的行无效... 是否有一种方法可以使用live事件使其起作用？ ```
$("table tr").hover(
  function () {},
  function () {}
);
7个回答
245

jQuery 1.4.1现在支持使用一个事件处理函数的"hover"方法来进行live()事件绑定：

$("table tr").live("hover",

function () {

});

或者，您可以提供两个函数，一个用于鼠标进入(mouseenter)，另一个用于鼠标离开(mouseleave)：

$("table tr").live({
    mouseenter: function () {

    },
    mouseleave: function () {

    }
});
1
这是不正确的，也无法工作。请查看live文档下的“多个事件”标题：http://api.jquery.com/live/ - Jason
34
从jQuery 1.4.2版本开始，.live("hover")等同于 .live("mouseover mouseout")，而非 .live("mouseenter mouseleave") - 参见 http://bugs.jquery.com/ticket/6077。因此，请使用.live("mouseenter mouseleave", function() {...})或.live("mouseenter", function() {...}).live("mouseleave", function() {...})。 - aem
2
感谢@aem，这个对我有用：$("table tr").live("mouseenter", function() {...}).live("mouseleave", function() {...}); - jackocnr
那很棒啊，除了mouseenter和mouseleave，我想你也可以在这里使用不同的操作（比如onclick之类的），对吗？ - xorinzor
3
根据JQuery .live文档页面，建议使用.on。"自jQuery 1.7起，.live()方法已弃用。请使用.on()来附加事件处理程序。" - johntrepreneur
显示剩余2条评论
110
$('.hoverme').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    // do something on mouseover
  } else {
    // do something on mouseout
  }
});

http://api.jquery.com/live/

也适用于我。+1 尝试了Philippe的版本，包括mouseover和mouseenter - 都不起作用。但这个可以。谢谢！ - eduncan911
.live现在已经被弃用，请查看安德烈的答案以获取替代方法。 - johntrepreneur
1
在这里使用mouseover和mouseout事件会导致代码在用户在元素内移动鼠标时不断触发。我认为mouseenter和mouseleave更合适，因为它们只会在进入时触发一次。 - johntrepreneur
61

.live() 在 jQuery 1.7 版本中已被弃用

请改用 .on()，并指定一个后代选择器

http://api.jquery.com/on/

$("table").on({
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
}, "tr");  // descendant selector
7
截至jQuery 1.9版本，此方法运作完美。所有的"live"和"delegate"解决方案都已被弃用！如果有人能够取消接受已接受的答案并接受这个答案，那就太棒了。 - Jascha Ehrenreich
5
自jQuery 1.4.1起，live()可以与hover事件一起使用。它基本上只是绑定到mouseenter和mouseleave事件，您在1.4.1之前的版本中同样可以这样做：
$("table tr")
    .mouseenter(function() {
        // Hover starts
    })
    .mouseleave(function() {
        // Hover ends
    });

这需要两个绑定，但同样有效。

5

这段代码是有效的:

    $(".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");
            }
        });
2
"ui-state-hover"是什么？它如何应用于用户的原始问题？ - IgorGanapolsky
2

警告：使用hover的实时版本会有显著的性能损失。在IE8中，特别是在大页面上，这一点尤为明显。

我正在处理一个项目，在其中通过AJAX加载多级菜单（我们有自己的原因:)。无论如何，在Chrome上使用hover的实时方法效果很好（IE9效果还可以，但不太好）。然而，在IE8中，它不仅减慢了菜单的速度（你必须悬停几秒钟才能下拉），而且页面上的所有内容都非常缓慢，包括滚动甚至检查简单的复选框。

直接绑定事件可得到足够的性能。

2
有用，但更像是一条评论而不是答案。 - mikemaccana
0

你应该使用 $(document)。如果你不使用它，新添加的表格行将无法正常工作。

$(document).on("mouseover","table tr",function(event){

//显示按钮

});

$(document).on("mouseout","table tr",function(event){

//隐藏按钮

});

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接