jquery 实时悬停答案

【问题标题】：jquery live hoverjquery 实时悬停
【发布时间】：2011-01-16 18:37:36
【问题描述】：

我正在使用以下 jquery 代码来显示上下文删除按钮，仅用于我们用鼠标悬停的表行。这有效，但不适用于动态添加 js/ajax 的行...

有没有办法在现场活动中实现这一点？

$("table tr").hover(
  function () {},
  function () {}
);

【问题讨论】：

标签： jquery live jquery-1.4

【解决方案1】：

jQuery 1.4.1 现在支持 live() 事件的“悬停”，但只有一个事件处理函数：

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

function () {

});

另外，您可以提供两个函数，一个用于 mouseenter，一个用于 mouseleave：

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

    },
    mouseleave: function () {

    }
});

【讨论】：

它仍然对我不起作用。我试过这样做：我哪里出错了？ > $('table tr').live('hover', function() { $(this).find('.deletebutton').toggle(); });
这是不正确的并且不起作用。请参阅live 文档下的“多个事件”标题：api.jquery.com/live
从 jQuery 1.4.2 开始，.live("hover") 等价于 .live("mouseover mouseout")，而不是 .live("mouseenter mouseleave") - 请参阅 bugs.jquery.com/ticket/6077 所以，执行 .live("mouseenter mouseleave", function() {...}) 或 .live("mouseenter", function() {...}).live("mouseleave", function() {... })
谢谢@aem，这对我有用：$("table tr").live("mouseenter", function() {...}).live("mouseleave", function( ) {...});
根据JQuery .live documentation page，它说要改用.on。 “从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。”

【解决方案2】：

$('.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 尝试使用 mouseover 和 mouseenter 执行 Philippe 的版本 - 均未成功。但是这个做到了。谢谢！
.live 现在已弃用，现在请参阅 Andre 的替换方法答案。
在此处使用mouseover 和mouseout 事件将导致代码在用户在元素内移动鼠标时不断触发。我认为mouseenter 和mouseleave 更合适，因为它只会在进入时触发一次。

【解决方案3】：

.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

【讨论】：

这在 jquery 1.9 中完美运行。不推荐使用所有实时和委托解决方案！如果有人可以不接受接受的答案并接受这个答案，那就太棒了。

【解决方案4】：

从 jQuery 1.4.1 开始，悬停事件适用于 live()。它基本上只是绑定到 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");
            }
        });

【讨论】：

什么是“ui-state-hover”？这如何适用于用户的原始问题？

【解决方案6】：

警告：实时版本的悬停会显着降低性能。在 IE8 的大页面中尤其明显。

我正在做一个项目，我们使用 AJAX 加载多级菜单（我们有我们的理由 :)。无论如何，我使用 live 方法进行悬停，这在 Chrome 上效果很好（IE9 还可以，但不是很好）。然而，在 IE8 中，它不仅减慢了菜单的速度（您必须悬停几秒钟才能掉落），而且页面上的所有内容都非常缓慢，包括滚动甚至检查简单的复选框。

在事件加载后直接绑定事件可以获得足够的性能。

【讨论】：

有用，但更多的是评论而不是答案。